[JavaScript知识库]极品-React生命周期详情hooks

React生命周期

常用的生命周期的方法有：
1.constructor()
constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。

    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
        //处理this指向问题
        console.warn('生命周期钩子函数:constructor')
    }

2.componentWillMount()
1.进行DOM操作
2.发送ajax请求,获取远程数据
componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

  componentDidMount() {
        console.warn('生命周期:componentDidMount')
    }
    tianjia = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

3. render()
   render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react 会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

   render() {
    
    }

更新后
4.componentDidUpdate
组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

 componentDidUpdate(prevProps){
        console.log('前',prevProps,'后',this.state.count)
 }

组件销毁
5. componentWillUnmount()
在此处完成组件的卸载和数据的销毁。

    componentWillUnmount(){
        console.warn('生命周期:componentWillUnmount')
    }
}

到这就是在React中常用的生命周期函数了

Hooks

为什么要用Hooks

优点:
生命周期化作钩子，可以在函数组件内自由使用，逻辑聚合、复用方便；
自定义hook代替高阶组件，更优雅简洁；
不用声明繁杂的类组件，不需要this，可以简化一些代码；
但是hook的出现也有一些争议，hook的改进并非完美无缺的，还需要社区去探索一个最佳实践。

缺点：
会增加一定心智负担，因为使用useEffect不像以前的生命周期那么直观，需要考虑到依赖的影响，还需要考虑跨渲染次数的数据存储，如果使用不当或者没有做好缓存会经常出现频繁渲染的问题；
因为太灵活，所以团队合作如果大家对hook的熟悉程度不同，写出来的代码上下限会更大；

1. useState useState相当于setDate

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect 生命周期

  useEffect(() => {
        // 更新,与挂载
        console.log('更新,与挂载')
        // 卸载
        return () => {
            cleanup
        }
        // 监视哪个属性的生命周期
    }, [input])

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

useRef,相当于ref

import React,{useState,useRef,useEffect} from 'react'
export default  function Hellow(){
    // useState相当于setDate
    const [a,seta] = useState(0);
    // useRef,相当于ref
    // const s2 = useRef();
    // // 生命周期
    // useEffect(() => {
    //     // 更新,与挂载
    //     console.log('更新,与挂载')
    //     // 卸载
    //     return () => {
    //         cleanup
    //     }
    //     // 监视哪个属性的生命周期
    // }, [input])
    return(
        <div>Hellow
             <button onClick={ev=>seta(a+1)}>点击+1</button>
             {a}
             <button onClick={ev=>{
                 s2.current.style.background='red'
             }}>色</button>
             <span ref={s2}>bbb</span>
        </div>
       
    )
}