react 生命中期 props state区别 生命周期

Posted 2020-11-02 逍遥妹纸

npm安装create-react-app

npx create-react-app my-app

cd my-app
npm start

 

查看调试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删除的过程