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(): 组件即将被卸载时执行 注意：在这里清除一些不需要的监听和计时器
注：本文仅个人信息整理
网友评论