


What do you need to know about React project development? Specific matters for react project development (with examples)
This article mainly talks about what you need to pay attention to when developing react projects. If you want to know, please click in and read it. Let’s read this article together now
对react项目开发,我大概对它的知识点进行了分类,主要由以下几个部分组成。
Basic writing method
Writing method of entry page
import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main'; render(<Main />,document.getElementById('app'));
Writing method of component
import React,{ Component } from 'react'; export default class Main extends Component{ render(){ return ( <p> 组件 </p> ) } }
Passing value from component
Parent component is passed to child component
父组件传给子组件靠props
import React,{ Component } from 'react'; import { render } from 'react-dom';class Main extends Component{ render(){ return ( <p> <Child title="我是父组件"/> </p> ) } }class Child extends Component{ render(){ return( <h2>{this.props.title}</h2> ) } } render(<Main />,document.getElementById('app'));
Sub component is passed to parent component
子组件传给父组件靠事件 子组件传递给父组件的过程描述,父组件传递给子组件一个函数,子组件执行这个函数,然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值,进行相应的操作。
import React,{ Component } from 'react'; import { render } from 'react-dom';class Main extends Component{ constructor(props){ super(props); this.state = { value:'init value' } } render(){ return ( <p> <p>{this.state.value}</p> <Child onClick={(value)=>{this.setState({value:value})}}/> </p> ) } }class Child extends Component{ render(){ return( <button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button> ) } } render(<Main />,document.getElementById('app'));
webpack
webpack的配置一般分为这么几个部分,entry、output、plugin、devServer、module等。 entry告诉webpack入口在哪。 output告诉webpack将来把文件打包到哪。 plugin代表一些其他的操作,如打开浏览器、文件压缩等处理。 devServer代表开发的时候启动一个本地服务器 module代表各种loader用来解析你的代码。
A common webpack configuration file is as follows:
var webpack = require('webpack');module.exports = { entry:"./src/index.js", output:{ path:'public', filename:'bundle.js' }, devServer:{ historyApiFallback:true, hot:true, inline:true }, plugins:[ new webpack.DefinePlugin({ 'process.env.NODE.ENV': "development" }), new webpack.HotModuleReplacementPlugin(), new OpenBrowserPlugin({ url: 'http://localhost:8080' }) ], module:{ loaders:[{ test:/\.js[x]?$/, exclude:/node_modules/, loader:'babel-loader', query:{ presets:['es2015','react','stage-1'] } },{ test:/\.css$/, loaders:['style',css] },{ test:/\.(png|jpg)$/, loader:"url-loader" }] } }
es6 part
In react, you generally need to know some es6 syntax. For react, some basic usage and writing methods of es6 are listed here.
import and export
import introduces something
import webpack from 'webpack';import React from 'react';import { Component } from 'react';
The variables introduced using "{}" are variables with the same name that must exist in that file.
The variables introduced without using "{}" are the variables thrown by export default in that file, and the variable names can be different.
export throws something.
function a(){ console.log(1); }let b = 1;export a;export b;export default a;
Export can be thrown multiple times and used multiple times.
Only one export default can be used, which means it will be thrown by default. The essence of
class and extends
class is a keyword that declares a class. Its meaning of existence is the same as var, let, const, function, etc.
How to use:
class Main{}
extends represents inheritance, how to use:
class Main extends Component{}
constructor represents the constructor, and super inherits properties and methods from the parent class.
class Main extends Component{ constructor(props){ super(props) } }
Life cycle function
Basic life cycle function
Divided into three states
Mounting
Updating
Unmounting
Mounting stage – generally in this stage life cycle function Will only be executed once
constructor()
componentWillMount()
componentDidMount()
render()Updating phase – will be executed multiple times
componentWillReceiveProps()
shouldComponentUpdate()
render()
componentDidUpdate()Unmountint phase – component unmount period
componentWillUnmount()
This is The current component life cycle function. There were previously two life cycle functions called getDefaultProps and getInitialState.
But their functions are now replaced by constructor.
Component life cycle usage scenarios
constructor
A common usage method is the initialization of stateconstructor(props){ super(props); this.state = { value:'' }}
Copy after loginCopy after logincomponentWillMount
Perform some initialization operations. Or do some data loading.<br/>componentWillMount(){ <br/> this.fetchData(); <br/>} <br/>
- ##componentDidMount
A common scenario is data request
componentWillMount(){ this.fetchData(); }
Copy after loginCopy after login - render
A function that must be included in a react component, returning the dom element of jsx syntax
render(){ return ( <p>123</p> ) }
Copy after loginCopy after login - componentWillReceiveProps
When props are passed, some processing can be performed before rendering. SetState will not be triggered twice.
There is only one parameter. Represents the props object - shouldComponentUpdate
There are two parameters, representing props and state
Must return a true or false. Otherwise, a syntax error will be reported.
Very useful when performing some performance optimization - componentDidUpdate
After the component is loaded, perform certain operations
- componentWillUnmount
The most common scenario is to clear the setInterval and setTimeout attached to the component.
componentWillUnMount(){ <br/> clearInterval(this.timer); <br/>} <br/><br/>
##componentWillReceiveProps analysis
常见的使用场景是,根据传递不同的props,渲染不同的界面数据。 项目比较复杂的情况下,一个页面的值发生变化,就要导致另一个页面的值发生改变,这样需要通过props的方式来告知对方,你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props,从而根据这个props进行相应的数据处理。
shouldComponentUpdate analysis
这个函数的返回值是一个布尔值。返回一个true。 返回一个false的情况下,它的的状态不会进行更新。
Performance optimization part
immutable.js
Data request part
ajax
In react, you can use the traditional XMLHttpRequest object to make data requests.
var xhr = new XMLHttpRequest();xhr.open(type, url, true);
xhr.onReadyStateChange = ()=>{
if (xhr.readyState == 4 && xhr.status == 200) {
sucess(xhr.responseText);
}
}
promise
promise is the data request method proposed by es6. Currently many browsers have not implemented this yet. But there are polyfills for promise, such as blueBird.js
The basic usage is: Promise objectconst Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => { return new Promise((resolve, reject) => { if(res){ resolve(res); }else if(err){ reject(err); } })}
fetch
The basic usage of fetch:
fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, mode: 'cors', body: "page=1&rows=10" }).then(res =>{ console.log(res); return res.json() }).then(res => { console.log(res); })
react routing
Basic use
import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom'; export default class Main extends Component{ render(){ return( <Router> <p> <Switch> <Route path='/' component={page1}> <Route path='/home' component={page2}> <Route path='/age' component={page3}> </Switch> </p> </Router> ) } }
Simple and practical use of redux
actions
const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT"; export function addtask(task){ return { type: ADD_TASK, task } } export function addContent(content){ return { type: ADD_CONTENT, content } }
reducers
import { addtask,addContent } from 'actions';export function(state = '',action){ switch (action.type){ case ADD_TASK: return action.task; break; case ADD_CONTENT: return action.content; break; default: return state; } }
对react项目开发,我大概对它的知识点进行了分类,主要由以下几个部分组成。
Basic writing method
How to write the entry page
import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main'; render(<Main />,document.getElementById('app'));
How to write the component
import React,{ Component } from 'react'; export default class Main extends Component{ render(){ return ( <p> 组件 </p> ) } }
Passing value from component
Passing value from parent component to child component
父组件传给子组件靠props
import React,{ Component } from 'react'; import { render } from 'react-dom';class Main extends Component{ render(){ return ( <p> <Child title="我是父组件"/> </p> ) } }class Child extends Component{ render(){ return( <h2>{this.props.title}</h2> ) } } render(<Main />,document.getElementById('app'));
Child The component is passed to the parent component
子组件传给父组件靠事件 子组件传递给父组件的过程描述,父组件传递给子组件一个函数,子组件执行这个函数,然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值,进行相应的操作。
import React,{ Component } from 'react'; import { render } from 'react-dom';class Main extends Component{ constructor(props){ super(props); this.state = { value:'init value' } } render(){ return ( <p> <p>{this.state.value}</p> <Child onClick={(value)=>{this.setState({value:value})}}/> </p> ) } }class Child extends Component{ render(){ return( <button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button> ) } } render(<Main />,document.getElementById('app'));
webpack
webpack的配置一般分为这么几个部分,entry、output、plugin、devServer、module等。 entry告诉webpack入口在哪。 output告诉webpack将来把文件打包到哪。 plugin代表一些其他的操作,如打开浏览器、文件压缩等处理。 devServer代表开发的时候启动一个本地服务器 module代表各种loader用来解析你的代码。
A common webpack configuration file is as follows:
var webpack = require('webpack');module.exports = { entry:"./src/index.js", output:{ path:'public', filename:'bundle.js' }, devServer:{ historyApiFallback:true, hot:true, inline:true }, plugins:[ new webpack.DefinePlugin({ 'process.env.NODE.ENV': "development" }), new webpack.HotModuleReplacementPlugin(), new OpenBrowserPlugin({ url: 'http://localhost:8080' }) ], module:{ loaders:[{ test:/\.js[x]?$/, exclude:/node_modules/, loader:'babel-loader', query:{ presets:['es2015','react','stage-1'] } },{ test:/\.css$/, loaders:['style',css] },{ test:/\.(png|jpg)$/, loader:"url-loader" }] } }
es6 part
In react, es6 syntax is general You need to know something about react. Some basic usage and writing methods of es6 are listed here.
import and export
import introduces something
import webpack from 'webpack';import React from 'react';import { Component } from 'react';
其中使用“{}”引入的变量是那个文件中必须存在的变量名相同的变量。
不使用“{}”引入的变量是那个文件中export default默认抛出的变量,其中变量名可以不一样。
export抛出一个东西。
function a(){ console.log(1); }let b = 1;export a;export b;export default a;
其中export可以抛出多个,多次使用。
export default只能使用一个,表示默认抛出。
class和extends
class的本质是一个申明类的关键字。它存在的意义和var、let、const、function等都是一样的。
使用方式:
class Main{}
extends代表继承,使用方式:
class Main extends Component{}
constructor代表构造函数,super是从父类继承属性和方法。
class Main extends Component{ constructor(props){ super(props) } }
生命周期函数
基本生命周期函数
分三个状态
Mounting
Updating
Unmounting
Mounting阶段–一般在这个阶段生命周期函数只会执行一次
constructor()
componentWillMount()
componentDidMount()
render()Updating阶段–会执行多次
componentWillReceiveProps()
shouldComponentUpdate()
render()
componentDidUpdate()Unmountint阶段–组件卸载期
componentWillUnmount()
这就是现阶段的组件生命周期函数。之前还有两个生命周期函数叫 getDefaultProps 以及 getInitialState。
但是它们的功能现在被constructor代替。
组件的生命周期使用场景
constructor
常见的一个使用方式就是state的初始化constructor(props){ super(props); this.state = { value:'' }}
Copy after loginCopy after logincomponentWillMount
进行一些初始化的操作。或者进行一些数据加载。<br/>componentWillMount(){ <br/> this.fetchData(); <br/>} <br/>
componentDidMount
常见场景就是数据请求componentWillMount(){ this.fetchData(); }
Copy after loginCopy after loginrender
一个react组件中必须包含的函数,返回jsx语法的dom元素render(){ return ( <p>123</p> ) }
Copy after loginCopy after logincomponentWillReceiveProps
在props传递的时候,可以在render之前进行一些处理。不会触发二次setState。
只有一个参数。代表的是props对象shouldComponentUpdate
有两个参数,分别代表props和state
必须返回一个true或者false。否则会语法报错。
在进行一些性能优化的时候非常有用componentDidUpdate
组件加载完毕,进行某些操作componentWillUnmount
最常见的场景,对组件附加的setInterval、setTimeout进行清除。<br/>componentWillUnMount(){ <br/> clearInterval(this.timer); <br/>} <br/>
componentWillReceiveProps解析
常见的使用场景是,根据传递不同的props,渲染不同的界面数据。 项目比较复杂的情况下,一个页面的值发生变化,就要导致另一个页面的值发生改变,这样需要通过props的方式来告知对方,你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props,从而根据这个props进行相应的数据处理。
shouldComponentUpdate解析
这个函数的返回值是一个布尔值。返回一个true。 返回一个false的情况下,它的的状态不会进行更新。
性能优化部分
immutable.js
数据请求部分
ajax
在react中,可以使用传统的XMLHttpRequest对象进行数据请求。
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onReadyStateChange = ()=>{
if (xhr.readyState == 4 && xhr.status == 200) {
sucess(xhr.responseText);
}
}
promise
promise是es6提出的数据请求方式。目前很多浏览器还没有实现。但是有promise的polyfill,如blueBird.js
基本的使用方式是:Promise对象
const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => { return new Promise((resolve, reject) => { if(res){ resolve(res); }else if(err){ reject(err); } })}
fetch
fetch的基本使用方式:
fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, mode: 'cors', body: "page=1&rows=10" }).then(res =>{ console.log(res); return res.json() }).then(res => { console.log(res); })
react 路由
基本使用
import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom'; export default class Main extends Component{ render(){ return( <Router> <p> <Switch> <Route path='/' component={page1}> <Route path='/home' component={page2}> <Route path='/age' component={page3}> </Switch> </p> </Router> ) } }
redux的简单实用
actions
const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT"; export function addtask(task){ return { type: ADD_TASK, task } } export function addContent(content){ return { type: ADD_CONTENT, content } }
reducers
import { addtask,addContent } from 'actions';export function(state = '',action){ switch (action.type){ case ADD_TASK: return action.task; break; case ADD_CONTENT: return action.content; break; default: return state; } }
The above is the detailed content of What do you need to know about React project development? Specific matters for react project development (with examples). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



How to build a real-time chat application using React and WebSocket Introduction: With the rapid development of the Internet, real-time communication has attracted more and more attention. Live chat apps have become an integral part of modern social and work life. This article will introduce how to build a simple real-time chat application using React and WebSocket, and provide specific code examples. 1. Technical preparation Before starting to build a real-time chat application, we need to prepare the following technologies and tools: React: one for building

React front-end and back-end separation guide: How to achieve front-end and back-end decoupling and independent deployment, specific code examples are required In today's web development environment, front-end and back-end separation has become a trend. By separating front-end and back-end code, development work can be made more flexible, efficient, and facilitate team collaboration. This article will introduce how to use React to achieve front-end and back-end separation, thereby achieving the goals of decoupling and independent deployment. First, we need to understand what front-end and back-end separation is. In the traditional web development model, the front-end and back-end are coupled

How to use React and Flask to build simple and easy-to-use web applications Introduction: With the development of the Internet, the needs of web applications are becoming more and more diverse and complex. In order to meet user requirements for ease of use and performance, it is becoming increasingly important to use modern technology stacks to build network applications. React and Flask are two very popular frameworks for front-end and back-end development, and they work well together to build simple and easy-to-use web applications. This article will detail how to leverage React and Flask

How to build a reliable messaging application with React and RabbitMQ Introduction: Modern applications need to support reliable messaging to achieve features such as real-time updates and data synchronization. React is a popular JavaScript library for building user interfaces, while RabbitMQ is a reliable messaging middleware. This article will introduce how to combine React and RabbitMQ to build a reliable messaging application, and provide specific code examples. RabbitMQ overview:

React code debugging guide: How to quickly locate and resolve front-end bugs Introduction: When developing React applications, you often encounter a variety of bugs that may crash the application or cause incorrect behavior. Therefore, mastering debugging skills is an essential ability for every React developer. This article will introduce some practical techniques for locating and solving front-end bugs, and provide specific code examples to help readers quickly locate and solve bugs in React applications. 1. Selection of debugging tools: In Re

ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need

How to use React and Google BigQuery to build fast data analysis applications Introduction: In today's era of information explosion, data analysis has become an indispensable link in various industries. Among them, building fast and efficient data analysis applications has become the goal pursued by many companies and individuals. This article will introduce how to use React and Google BigQuery to build a fast data analysis application, and provide detailed code examples. 1. Overview React is a tool for building

How to use React and Docker to package and deploy front-end applications. Packaging and deployment of front-end applications is a very important part of project development. With the rapid development of modern front-end frameworks, React has become the first choice for many front-end developers. As a containerization solution, Docker can greatly simplify the application deployment process. This article will introduce how to use React and Docker to package and deploy front-end applications, and provide specific code examples. 1. Preparation Before starting, we need to install
