creact 生命中期 props state区别 生命周期 安装create-react-app

npm安装create-react-app
  

  • npm install -g create-react-app

  • create-react-app my-app
    cd my-app  
    npm start

链接:https://segmentfault.com/a/1190000010454922

查看调试props验证  
babel-react-optimize 可以在调试环境下有propstype属性,在产品环境下自动去掉,以免占用浏览器资源,降低性能;

defaultProps可以给组件设置默认的初始值。

组件.defaultProps={

  initvalue:0

}
prop和state的区别:

 prop是用于定义外部接口,state用于记录内部状态;

 prop是组件外部设置,调用组件的时候使用,state是组件内部赋值;
组件不应该改变prop值,而state存在的目的就是让组件改变的。
*另外更改state需要用this.setState({})方法更改值,该方法会重新渲染dom,里边必须是对象。而直接修改state的值,dom并不会直接改变。

react生命周期:

相比于vue的生命周期,react相对更少一些,vue里是create mount update destroy  分别有之前和之后总共8个,react大的只有:

装载过程( mount):组件第一次在dom树渲染的过程;   

更新过程(update):组件重新渲染

卸载过程(unmout):组件从dom删除的过程

组件更新的过程中

componentWillReceiveProps、 shouldComponentUpdate、componentwillUpdate、render、componentDidUpate
注:并不是所有更新都会执行全部函数

componentWillReceiveProps

  该过程只有父组件调用了render方法,在render里被渲染的子组件就会经历更新过程,不管父组件给子组件的props有没有改变,都会触发子组件的此函数。
this.setState()不会调用此方法

在react组件组合中,完全可以只渲染一个子组件,而其他组件完全不需要渲染,这是提高react性能的重要方式。
shouldComponentUpdate 此阶段在执行的时候并不是立即更新state的值,在函数执行到shouldComponentUpdate的时候,this.state依然是this.setState函数执行之前的值,所以要在nextProps、nextState、this.porps和this.state中相互比较。

原文地址:https://www.cnblogs.com/xiaoyaoweb/p/8976744.html