一、生命周期
1.挂载阶段
（1）执行时机：组件创建时（页面加载时）
（2）执行顺序：constructor() >>> render() >>> componentDidMount()
注意：不能在render()钩子中调用setState()方法，因为setState()被调用时又会执行render()钩子，造成 递归调用。
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| constructor | 创建组件时，最先执行 | 1.初始化state；2.为事件处理函数绑定this。 |
| render | 每次组件渲染都会触发 | 渲染UI （注意：不能调用setState()） |
| componentDidMount | 组件挂载（完成DOM渲染）后 | 1.发送请求；2.DOM操作。 |
2.更新阶段
（1）setState()、 forceUpdate()、 组件接收到新的props，都会触发页面重新渲染。
（2）执行顺序：render() >>> componentDidUpdate()
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| render | 每次组件渲染都会触发 | 渲染UI（与 挂载阶段 是同一个render） |
| componentDidUpdate | 组件更新（完成DOM渲染）后 | 1.发送请求；2.DOM操作；注意：如果要setState()，必须放在一个if条件中
|
注意：更新阶段，rdnder()钩子执行完会立刻执行componentDidUpdate()钩子。必须在 if 判断 中才能调用setState( )，否则也会造成setState( )和render( )的 递归调用。
//preProps参数代表的是更新前的props数据
componentDidUpdate(preProps){
if(preProps.xxx !== this.props.xxx){
//此时可以修改组件状态 或者 进行Ajax请求
this.setState({})
}
}
3.卸载阶段
（1）执行时机：组件从页面中消失时。
（2）作用：用来做清理操作。
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| componentWillUnmount | 组件卸载 | 执行清理工作（比如：清理定时器等） |
4.其他不常用钩子
getDerivedStateFromProps()
- getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
- 不管原因是什么，都会在每次渲染前触发此方法
shouldComponentUpdate()
- 根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染
- 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true
getSnapshotBeforeUpdate()
- getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
- 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等
二、render-props模式：vue中的插槽
1.为什么说render-props是插槽？
（1）父组件调用子组件时 添加 render属性，该属性是一个函数，返回值是HTML结构，就是真实的 插槽内容。
(或者在 子组件标签 内部添加HTML结构，这部分内容会被 子组件的this.props.children属性接收。)
<div>
<Son render={()=>(<span></span>)}></Son>
</div>
（2）子组件中触发父组件的 自定方法render( ) 或 children属性，将UI结构渲染到 预留的插槽位置。
render () {
return this.props.render()
}
https://www.bilibili.com/video/BV1wy4y1D7JT?p=124&vd_source=af31c0cb4ec42e4083df75689129377f
2、利用render-props模式复用代码逻辑
封装子组件。使用方法类似于父子传值：
（1）创建Mouse公共组件，在组件中提供 复用的逻辑代码。
（2）子向父传值。子组件触发父组件的 自定义事件 render()，将私有数据传递给父组件使用。
- retnrn父组件的自定义事件，既触发了该事件，又把该事件函数的返回值渲染了出来
（3）父组件给子组件绑定自定义事件。事件处理函数 的 返回值 会作为子组件的UI进行渲染。
- 这里实际给自定义事件render赋值的是一个函数
// render props模式
// 封装公共子组件
class Mouse extends React.Component {
// 1.私有数据
state = {
x: 0,
y: 0
}
// 2.在生命周期钩子中修改私有数据
componentDidMount () {
window.addEventListener('mousemove', (e) => {
this.setState({
x: e.clientX,
y: e.clientY
});
})
}
render () {
// 3.触发父组件的自定义事件：
// (1)将私有数据传递给父组件使用；
// (2)将父组件的事件处理函数的返回值作为UI结构渲染
return this.props.render(this.state)
}
}
// 父组件使用公共子组件
class UseMouse extends React.Component {
render () {
return (
// 父组件内调用子组件，并绑定自定义事件 render():
// (1)通过参数获取子组件传递的数据
// (2)事件处理函数的返回值会被子组件渲染成UI
<Mouse render={(mouse) => {
return <p>鼠标的x坐标:{mouse.x},鼠标的y坐标：{mouse.y}</p>
}}>
</Mouse>
)
}
}
ReactDOM.render(<UseMouse></UseMouse>, document.getElementById('root'))
（4）使用 children属性 代替自定义事件render()
父组件调用子组件时变为：
// 使用children属性代替render()
<Mouse>
{(mouse) => {
return <p>鼠标的x坐标:{mouse.x},鼠标的y坐标：{mouse.y}</p>
}}
</Mouse>
子组件触发自定义事件时变为childern事件：
return this.props.children(this.state)
3. 什么是 children属性：children-props插槽
父组件调用子组件时，子组件标签内部的内容 不会显示在页面上。而是变成children属性，通过 props 传递给了 子组件。
// 父组件
render () {
return (
<div>
{/* 在子组件标签内部添加内容*/}
<Son>这段内容不会直接显示到页面上，而是通过props传递给了Son子组件</Son>
</div>
)
// 子组件
render () {
console.log(this.props.children); // 通过 children 拿到标签内部的内容
return <div>{this.props.children}</div>
}
三、高阶组件
1.使用方式
（1）高阶组件本质是一个 函数，函数名约定以 with开头。
（2）参数是 父组件名，所以 参数首字母大写。
（3）在函数内部创建一个 类组件，提供复用的状态与逻辑代码，并 返回该类组件。
- 这个类组件的本质就是 公共子组件。
（4）在 类组件 中，渲染 参数组件(父组件)，同时将 状态 通过 prop 传递给参数组件使用。
（5）调用该高阶组件函数，传入要增强的 父组件，返回值是增强后的 新组件。
注意：和render-props模式一样，都是子组件提供数据和逻辑代码，父组件提供UI结构。
// 高阶组件
// 1.定义高阶组件函数widthHOC
function widthHOC (FatherComponentName) {
// 2.函数内部创建真正的复用子组件Mouse
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
componentDidMount () {
window.addEventListener('mousemove', (e) => {
this.setState({
x: e.clientX,
y: e.clientY
});
})
}
render () {
// 3.在复用子组件中渲染形参父组件FatherComponentName ，并传递数据
return <FatherComponentName {...this.state} {...this.props}></FatherComponentName>
}
}
// 4.将复用子组件Mouse返回
return Mouse
}
// 5.定义父组件FatherComponent
function FatherComponent (props) {
return <p>鼠标的x坐标:{props.x}, 鼠标的y坐标：{props.y}</p>
}
// 6.调用高阶组件函数，将真正的父组件作为参数进行传递，返回值是新组件
const NewFatherComponent = widthHOC(FatherComponent)
ReactDOM.render(<NewFatherComponent></NewFatherComponent>, document.getElementById('root'))
2.设置displayName
- 问题：多次调用高阶组件函数后，得到的组件名称相同。
- 原因：默认情况下，React使用组件名称作为displayName。
- 解决方式：为真正的 复用子组件 设置displayName，便于调试时区分不同的组件。
-
设置方式：
(1) 在页面中提前声明第二个方法；
(2) 在高阶组件内部、return之前，也就是 步骤4之前 设置第一句代码。
image.png
3.传递props
- 问题：如果没有传递props，会导致props丢失问题
- 解决方式： 在 步骤3 的时候，将state和props一起传递给组件。
// 3.在复用子组件中渲染形参父组件，并传递数据
return <FatherComponentName {...this.state} {...this.props}></FatherComponentName>
四、组件性能优化
1.避免不必要的重新渲染
组件更新机制：
（1）只要调用setState()，无论是否真正修改数据，组件的render()函数都会被调用，从而触发更新。
（2）父组件更新会引起子组件也被更新.
解决方案一：
（1）无论父子组件，都可以添加钩子函数 shouldComponentUpdate()，判断是否需要更新。
（2）钩子的触发时机：这是一个 更新阶段 的钩子函数，组件重新渲染前执行(shouldComponentUpdate => render)
（3）通过 参数 可以获得 最新的props和state；通过 this.state 和 this.props获取 更新前的数据。
（4）钩子函数 必须返回一个布尔值，根据state或props是否改变来决定组件是否更新。
class HelloReact extends React.Component {
shouldComponentUpdate (nextProps，nextState) {
//更新前的state
console.log(this.state.count)
//最新的state
console.log(nextState.count)
// 根据条件判断是否更新当前组件
return true
}
render () {...}
}
2.纯组件 PureComponent
（1）纯组件作用： PureComponent 与 Component 功能相似
（2）区别： PureComponent 内部自动实现了 shouldComponentUpdate钩子，无需手动比较。
（3）原理：纯组件内部通过分别比对前后两次 props 和 state 的值，来决定是否重新渲染组件。
（4）使用：
import React，{ PureComponent } from 'react'
class Demo extends PureComponent { }
3.使用纯组件的注意事项
（1）如果 变化的 state或props 数据是 简单数据类型 时，只要数据改变，组件就会更新。
（2）如果是 引用数据类型时，纯组件内部比较的是数据的 地址。
（3）创建新的对象（数组）时，不要直接把旧数据赋值给新数据，这样赋值的只是地址，最终两个变量指向了内存中同一个数据，纯组件就不会更新。所有修改原数据的都不行，数组的push方法等，也不能使用。
错误示例：
const newObj = this.state.obj
newObj.num+=1
this.setState({obj:newObj})
正确做法：创建新的对象，并把旧数据解构进去
const newObj = {...this.state.obj，name:'张三'}
this.setState({obj:newObj}）
