本篇文章主要的讲述了关于react项目开发需要注意的哪些情况，想知道的同学就赶紧点进来看吧，现在就一起来阅读本篇文章吧
对react项目开发，我大概对它的知识点进行了分类，主要由以下几个部分组成。
基础写法入口页面的写法import react,{ component } from 'react';import { render } from 'react-dom';import main from './components/main';render(<main />,document.getelementbyid('app'));
组件的写法import react,{ component } from 'react';export default class main extends component{ render(){ return ( <p> 组件 </p> ) }}
组件传值父组件传给子组件父组件传给子组件靠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'));
子组件传给父组件子组件传给父组件靠事件子组件传递给父组件的过程描述，父组件传递给子组件一个函数，子组件执行这个函数，然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值，进行相应的操作。
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'));
webpackwebpack的配置一般分为这么几个部分，entry、output、plugin、devserver、module等。entry告诉webpack入口在哪。output告诉webpack将来把文件打包到哪。plugin代表一些其他的操作，如打开浏览器、文件压缩等处理。devserver代表开发的时候启动一个本地服务器module代表各种loader用来解析你的代码。
一个普通的webpack配置文件如下：
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部分在 react 中，es6语法一般是要会一些的，针对 react，关于es6一些基本的使用以及写法，这里列出来。
import和exportimport引入一个东西
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和extendsclass的本质是一个申明类的关键字。它存在的意义和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:'' }}
componentwillmount
进行一些初始化的操作。或者进行一些数据加载。
componentwillmount(){
this.fetchdata();
}
componentdidmount
常见场景就是数据请求
componentwillmount(){ this.fetchdata();}
render
一个react组件中必须包含的函数，返回jsx语法的dom元素
render(){ return ( <p>123</p> )}
componentwillreceiveprops
在props传递的时候，可以在render之前进行一些处理。不会触发二次setstate。
只有一个参数。代表的是props对象
shouldcomponentupdate
有两个参数，分别代表props和state
必须返回一个true或者false。否则会语法报错。
在进行一些性能优化的时候非常有用
componentdidupdate
组件加载完毕，进行某些操作
componentwillunmount
最常见的场景，对组件附加的setinterval、settimeout进行清除。
componentwillunmount(){
clearinterval(this.timer);
}
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);
}
}
promisepromise是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); } })}
fetchfetch的基本使用方式：
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; }}
对react项目开发，我大概对它的知识点进行了分类，主要由以下几个部分组成。
基础写法入口页面的写法import react,{ component } from 'react';import { render } from 'react-dom';import main from './components/main';render(<main />,document.getelementbyid('app'));
组件的写法import react,{ component } from 'react';export default class main extends component{ render(){ return ( <p> 组件 </p> ) }}
组件传值父组件传给子组件父组件传给子组件靠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'));
子组件传给父组件子组件传给父组件靠事件子组件传递给父组件的过程描述，父组件传递给子组件一个函数，子组件执行这个函数，然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值，进行相应的操作。
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'));
webpackwebpack的配置一般分为这么几个部分，entry、output、plugin、devserver、module等。entry告诉webpack入口在哪。output告诉webpack将来把文件打包到哪。plugin代表一些其他的操作，如打开浏览器、文件压缩等处理。devserver代表开发的时候启动一个本地服务器module代表各种loader用来解析你的代码。
一个普通的webpack配置文件如下：
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部分在 react 中，es6语法一般是要会一些的，针对 react，关于es6一些基本的使用以及写法，这里列出来。
import和exportimport引入一个东西
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和extendsclass的本质是一个申明类的关键字。它存在的意义和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:'' }}
componentwillmount
进行一些初始化的操作。或者进行一些数据加载。
componentwillmount(){
this.fetchdata();
}
componentdidmount
常见场景就是数据请求
componentwillmount(){ this.fetchdata();}
render
一个react组件中必须包含的函数，返回jsx语法的dom元素
render(){ return ( <p>123</p> )}
componentwillreceiveprops
在props传递的时候，可以在render之前进行一些处理。不会触发二次setstate。
只有一个参数。代表的是props对象
shouldcomponentupdate
有两个参数，分别代表props和state
必须返回一个true或者false。否则会语法报错。
在进行一些性能优化的时候非常有用
componentdidupdate
组件加载完毕，进行某些操作
componentwillunmount
最常见的场景，对组件附加的setinterval、settimeout进行清除。
componentwillunmount(){
clearinterval(this.timer);
}
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);
}
}
promisepromise是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); } })}
fetchfetch的基本使用方式：
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; }}
以上就是react项目开发你需要知道哪些？react项目开发具体事项（附实例）的详细内容。