react⽣命周期，hooks对应的⽣命周期？⼀、⾸先我们先看⼀下类（class）组件整个周期包含哪些：
class MyComponent extends Component {
// ======= 挂载卸载阶段
constructor(props: any) {
super(props);
this.state = {
name: 'Hello World',
};
}
// 16.8 新增钩⼦函数
static getDerivedStateFromProps(props, state) {
console.log('判断数据是否需要更新', props, state);
return null;
}
// 16.8 已废弃
componentWillMount() {
console.log('渲染之前');
}
// 16.8 componentWillMount变更，后续可能会废弃
UNSAFE_componentWillMount() {
console.log('渲染之前');
}
render() {
console.log('渲染');
return <div>MyComponent</div>;
}
componentDidMount() {
console.log('渲染完成');
}
// ==========更新阶段，也会重新调⽤getDerivedStateFromProps
// 16.8 新增钩⼦函数
static getDerivedStateFromProps(props, state) {
console.log('判断数据是否需要更新', props, state);
return null;
}
// 16.8已废弃
componentWillReceiveProps(nextProps) {
console.log('接收到来⾃⽗组件的数据', nextProps);
}
// 16.8 componentWillReceiveProps变更⽽来
UNSAFE_componentWillReceiveProps(nextProps) {
console.log('接收到来⾃⽗组件的数据', nextProps);
}
// 16.8新增钩⼦函数
static getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('返回组件更新daom', prevProps, prevState);
}
shouldComponentUpdate(nextProps, nextState) {
console.log('判断数据是否更新true，false来判断', nextProps, nextState);
return false;
}
// 16.8已废弃
componentWillUpdate(nextProps, nextState) {
console.log('组件数据将要更新', nextProps, nextState);
}
/
/ 16.8 变更componentWillUpdate
UNSAFE_componentWillUpdate(nextProps, nextState) {
console.log('组件数据将要更新', nextProps, nextState);
}
componentDidUpdate(prevProps) {
console.log('组件数据更新完毕', prevProps);
}
// ========= 卸载阶段
componentWillUnmount() {
console.log('已经销毁');
}
/
/ 其他api
static getDerivedStateFromError(error) {
// 更新 state 使下⼀次渲染可以显⽰降级 UI
return { hasError: true };
}
componentDidCatch(error, info) {
// 捕获错误信息
}
// 增加错误信息校验
render() {
if (this.state.hasError) {
/
/ 你可以渲染任何⾃定义的降级 UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
1、constructor：
  构造函数，如不初始化state或者进⾏函数绑定，可以不进⾏react组件实现构造函数；通过在构造函数中初始化state，接受来⾃⽗组件的props
2、getDerivedStateFromProps：
  16.8之后的⼀个静态⽅法，通过接受⽗组件props判断是否执⾏更新，返回null不更新，具体见另外⼀篇⽂章分析，详见
3、componentWillMount（已过时） => UNSAFE_compomentWillMount
  react 16.8之前的周期函数，在render之前调⽤，所有setState不会出来额外渲染，组件dom节点没有渲染之前进⾏加载⼀些数据，⼀般进⾏服务端渲染的时候进⾏优化，16.8以后改为UNSAFE_compomentWillMount，但是没有被废弃，保留原来的函数；
4、render：
  ⼀个纯渲染函数，返回Dom，React组件，Fragment等
5、componentDidMount：
  组件挂载时调⽤，此时dom已渲染，可以获取canvas，svg等操作，可以进⾏数据操作，获取接⼝数据；
6、componentWillReceiveProps（已过时） => UNSAFE_componentWillReceiveProps
  组件挂载阶段接受⽗组件props参数进⾏state更新操作，需要妥善处理，不然容易循环渲染等问题，16.8以后被getDerivedStateFromProps替换；
7、getSnapshotBeforeUpdate：
  16.8以后的⼀个静态⽅法，判断dom节点更新阶段更新时，及时获取更新后的dom节点，同样进⾏单独的分析，详见
8、shouldComponentUpdate：
  ⼀个⽐较重要的周期，在组件更新阶段是否执⾏更新操作，默认返回false不重新渲染，返回true重新渲染，根据props和state的进⾏⽐较是否进⾏节点更新操作，component和pureComponent区别就在于此
9、componentWillUpdate （已过时）=> UNSAFE_compinetWillUpdate
  16.8已废弃，更新阶段获取更新后的dom节点，为更新阶段做准备；
10、componentDidUpdate：
  组件更新阶根据返回的参数props，state，snapshot，第三个参数是之前getSnapshotBeforeUpdate返回的，如果出来函数毁掉时需要Dom元素的状态，则将对⽐计算机的过程迁移⾄getSanapShotBeforeUpdate，然后在componentDidUpdate中统⼀触发更新；
11、componentWillUnmount：
  我们组件卸载阶段执⾏的⽅法，组件销毁进⾏执⾏初始化的⼀些操作；
12、getDeriedStateFromError和componentDidCatch
  错误捕获⽇志，我们可以根据我们错误信息进⾏捕获，增加错误边界等组件进⾏1前端代码兼容
⼆、然后我们再看看⽆状态（hooks）组件的钩⼦函数
const MyComponent = ((props) =>{
  　const [name,setName] = React.useState('name');
React.useMemo(() => ()=>{
console.log('组件dom节点没有渲染之前调⽤⼀次');
}, []);
const renderDom = React.useMemo(() => ()=>{
console.log('组件dom节点没有渲染之前根据依赖参数props调⽤');
}, [props])
React.useEffect(() => {
console.log('组件初始化调⽤⼀次');
}, [])
React.useEffect(()=>{
console.log('组件根据依赖参数props更新调⽤');
},[props])
React.useEffect(()=>{
return ()=>{
console.log('组件卸载调⽤');
}
},[]);
const handleClick = React.useCallback(() =>{
console.log('监听事件通过钩⼦函数包裹，优化性能');
},[]);
return (
console.log('返回dom节点');
)
});
1、useState：
  和class的state类似，只不过是独⽴管理组件变量，
2、useMemo:
  组件Dom节点，进⾏计算⼀些，包括要渲染的Dom或者数据，根据依赖参数进⾏更新
3、useEffect：
  hooks的组件⽣命周期其实就是钩⼦函数useEffect的不同⽤法，传递参数的不同会导致不同的结果，具体分析见        4、useCallBack:
reacthooks理解　⼀个钩⼦函数，通过包裹我们的普通函数进⾏性能优化；
后⾯继续完善

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。