2018-09-05

组件传值问题

  1. 父组件给子组件传值应该使用props。
  2. 子组件要给父组件传值,需要调用父组件传递的方法。
  3. props传值只能一层一层传递,兄弟组件之间、爷爷组件给孙子组件传值,都需要通过父组件传递。

注意点

  1. state是内部状态,不会对外部有影响
  2. 布尔值变量的命名已 "is" 或者 "has" 开头

contextAPI

  1. Comsumer 的子组件必须是一个方法,接收的参数即为 Provider 中的 value 值,一般会使用解构赋值获取自己想要的变量
  2. Comsumer 接受的值不用使用 PropTypes 验证其正确性。

性能优化

  1. 避免使用匿名函数,因为每次触发事件都会生成一个匿名函数,浪费性能。
  2. 子组件渲染之前使用 shouldComponentUpdate 输入(nextProps,nextState)将其中的值与现在的值 (this.props,this.state) 是否有变化,没有变化就不用重新渲染,减少render次数

生命周期

  1. 只有使用 class XXX extends component 的才有生命周期 还可以使用 create reactclass 构建
  2. 装在和更新阶段都会有 render 操作
  3. ajax 请求应该在 DidMount 和 DidUpdate 之后

装载阶段

  1. 装载阶段会执行 constructor 并且只会执行一次,在这个阶段会初始化state
  2. 装载阶段执行顺序 constructor => componentWillMount => render => componentDidMount

更新阶段

  1. 更新阶段执行顺序 componentWillReciveProps => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate
  2. 父组件渲染,子组件会触发 componentWillReciveProps 事件,

卸载阶段

  1. 卸载阶段只有 componentWillUnMount 一个生命周期,主要是清除一些不必要的东西,比如定时器。

使用的第三方库

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,529评论 1 33
  • 说在前面 关于 react 的总结过去半年就一直碎碎念着要搞起来,各(wo)种(tai)原(lan)因(le)。心...
    陈嘻嘻啊阅读 6,918评论 7 41
  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 1,855评论 0 1
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,499评论 1 10
  • 又是一年春节来临时,我却没了往日的期待和欢喜。 看着电视里的广告在宣传自己的产品时,总忘不了说一句“新春好礼,要送...
    索风阅读 419评论 0 4