react知识点整理

react概念：单页面应用程序 轻量级应用框架

jsx 预处理器  babel

node.js  服务器渲染界面

npm ---> 第三方插件库

webpack ---> 允许编写模块化代码，压缩代码优化加载时间

babel ---> 允许旧版浏览器识别  将jsx语言转化为浏览器识别的语言  兼容

4.组件之间的传值

父传子  --->  props属性

子传父  --->  利用回调函数属性传值

兄弟之间传值 ---> contex

5.生命周期函数（钩子,在某一时刻会被自动调用执行的函数）

图片来源于网络

props/state/render函数

1.render函数会在props,state发生改变的时候触发。

2.子组件的render()函数会在父组件render()执行的时候被执行

3.在render()，创建虚拟dom，进行diff算法，更新dom树。

注意：不要再render中修改state,会导致死循环

1.初始化props,state

2.挂载：

componentWillDidMount : 组件被挂载到界面之前调用，只调用一次

要求异步数据，componentWillDidMount执行后render立马执行

componentDidMount():加载界面之后调用，只调用一次，异步请求数据更新state

3.更新

componentWillReceiveProps：接受新的props

shouldComponentUpdate 组件更新之前调用  判断两个props或者state是否相同，相同则返回false不触发更新

//在render函数调用前判断：如果前后state中Number不变，通过return false阻止render调用  shouldComponentUpdate(nextProps,nextState){

      if(nextState.Number == this.state.Number){

        return false      }

  }

  shouldComponentUpdate(nextProps,nextState){

      if(nextProps.number == this.props.number){

        return false      }

      return true  }

图片来源于网络

防止没有意义的重复渲染：demo

https://www.cnblogs.com/penghuwan/p/6707254.html

componentDidUpdate:组件更新完之后调用但是在这里不能调用setState函数，这会导致函数调用componentshouldupdate从而进入死循环。

componentWillUnmount():  组件即将被卸载时执行 注意：在这里清除一些不需要的监听和计时器

注：本文仅个人信息整理