极品-React生命周期详情,hooks

Posted 2022-01-30 哈比老乌龟

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>
       
    )