React hook 以及 React Fiber 原理

/*
 * @Descripttion: React hook 以及 React Fiber 原理
 * @version: 
 * @Author: lhl
 * @Date: 2021-03-10 15:42:23
 * @LastEditors: lhl
 * @LastEditTime: 2021-03-23 15:59:18
 */
// hook使用规则
// 只在最顶层使用 Hook
// 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们
// 只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hoo
// 在 React 的函数组件中调用 Hook 在自定义 Hook 中调用其他 Hook
// npm install eslint-plugin-react-hooks --save-dev ESLint 插件来强制执行这两条规则
// ESLint 配置
/*
    {
        "plugins": [
        // ...
        "react-hooks"
        ],
        "rules": {
        // ...
        "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
        "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
        }
    }
*/

// 为什么选择使用 Hook
/**
 * 1.在组件之间复用状态逻辑很难
 * 2.复杂组件变得难以理解
 * 3.用更少的代码，实现同样的效果
 */

// React Hooks的几个常用钩子  
// useCallback 的功能完全可以由 useMemo 所取代
// useCallback(fn, inputs)    ===   useMemo(() => fn, inputs)
/**
    1.useState()    // 状态钩子
    2.useContext()  // 共享状态钩子
    3.useReducer()  // action 钩子
    4.useEffect()   // 副作用钩子 useEffect在浏览器渲染完成后执行
    5.useCallback()  // 记忆函数  
    6.useMemo() // 记忆组件 
    7.useRef() // 保存引用值
    8.useImperativeHandle() // 穿透 Ref
    9.useLayoutEffect() // 同步执行副作用 不常用  useLayoutEffect在浏览器渲染前执行
    10.自定义 hook  // 以useXX开头的 封装重复使用的代码提高复用性
 * 
*/
import React, { useState, useEffect, useRef, useReducer, useCallback, useMemo, forwardRef, useImperativeHandle, Component } from 'react';

const HookComp = () => {
    const size = useChangeSize();
    const [count, setCount] = useState(0);
    const [title, setTitle] = useState('标题')
    let timer = useRef();
    const ref = useRef();
    // useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。
    // 它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API
    
    // 相当于 componentDidMount 和 componentDidUpdate:
    useEffect(() => {
        timer.current = setInterval(() => {
           console.log(1)
        },1000)
        document.title = `You clicked ${count} times`;
        return () => {
            clearInterval(timer.current) //相当于 componentWillUnmount
        } 
    },[count]);

    useEffect(() => {
        ref.current.open()
    },[])
    
    return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
          <input type="text" value={title}  onChange={e => setTitle(e.target.value)} />
          <p>{title}</p>
          <div>页面大小{size.width}*****{size.height}</div>
          <TimeTest/>
          <TestRef ref={ref}></TestRef>
          <TestRef1 ref={ref}></TestRef1>
          <BookkList/>
        </div>
    )
}

// useReducer 用法
function BookkList() {
    const inputRef = useRef();
    const [items, dispatch] = useReducer((state,action)=> {
        console.log(state,action)
        switch(action.type){
            case 'add':
                return [
                    ...state,
                    {
                        id: state.length,
                        name: action.name
                    }
                ]
            case 'del':
                return state.filter((_,index) => index != action.index)
        }
    },[])
    
    function handleAdd(event){
        event.preventDefault();
        dispatch({
            type:'add',
            name:inputRef.current.value
        });
        inputRef.current.value = '';
    }

    return (
        <>
            <form>
                <input ref={inputRef}/>
                <button onClick={ handleAdd }>点击添加</button>
            </form>
            <ul>
                {
                    items.map((item, index) => (
                        <li key={item.id}>
                            {item.name}
                            <button onClick={ () => dispatch({type:'del',index})}>点击删除</button>
                        </li>
                    ))
                }
            </ul>
        </>
    )
}

/*
    useRef是一个方法，且useRef返回一个可变的ref对象
    修改 ref 的值是不会引发组件的重新 render 
    useRef非常常用的一个操作，访问DOM节点，对DOM进行操作，监听事件等等
    ref 在所有 render 都保持着唯一的引用，因此所有的对 ref 的赋值或者取值拿到的都是一个 最终 的状态，而不会存在隔离
    使用 useRef 来跨越渲染周期存储数据，而且对它修改也不会引起组件渲染
    createRef 与 useRef 的区别: createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。
    forwardRef是用来解决HOC组件传递ref的问题的
*/
const TestRef = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
      open() {
        alert("ref")
      }
    }))
    return (
        <div>useImperativeHandle 穿透 ref的使用</div>
    )
})

// 等同于 =>
// useImperativeHandle(ref,createHandle,[deps])可以自定义暴露给父组件的实例值。如果不使用，
// 父组件的 ref(chidlRef) 访问不到任何值（childRef.current==null）
// useImperativeHandle应该与forwradRef搭配使用
// React.forwardRef会创建一个React组件，这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。
// React.forward接受渲染函数作为参数，React将使用prop和ref作为参数来调用此函数

const ChildComponent = (props, ref) => {
  useImperativeHandle(ref, () => ({
    open() {
        alert("ref")
    }
  }));
  return <h3>useImperativeHandle 穿透 ref的使用</h3>;
};
const TestRef1 = forwardRef(ChildComponent);


function TimeTest(){
    const [count, setCount] = useState(0);
    const preCount =  usePreVal(count) // 使用自定义hook
    const doubleCount = useMemo(() => {
      return 2 * count;
    }, [count]);
  
    const timerID = useRef();
    
    useEffect(() => {
      timerID.current = setInterval(()=>{
          setCount(count => count + 1);
      }, 1000); 
    }, []);
    
    useEffect(()=>{
        if(count > 10){
            console.log('大于10定时器不再走了')
            clearInterval(timerID.current);
        }
    });
    
    return (
      <>
        <button ref={timerID} onClick={() => {setCount(count + 1)}}>
            Count: {count} === double: {doubleCount} === preCount：{preCount}
        </button>
      </>
    );
}

// 使用 const preState =  usePreVal(state) 获取上一个值
// useRef 不仅仅是用来管理 DOM ref 的，它还相当于 this , 可以存放任何变量
function usePreVal(state){

    const ref = useRef();

    useEffect(() => {
        ref.current = state
    })
    
    return ref.current
}
  
// 自定义hooks，用use开头命名，封装重复使用的代码，在多个场景下使用，提高代码的复用性
// react hook监听窗口大小
function useChangeSize(){
    const win = {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    }
    const [size, setSize] = useState(win)

    // useCallback缓存方法  [] 只执行一次
    const onResize = useCallback(()=>{
        console.log('111')
        setSize(win)
    },[])

    useEffect(() => {
        window.addEventListener('resize',onResize)
        // 销毁时
        return () => {
            window.removeEventListener('resize',onResize)
        }
    },[onResize])
    
    return size
}

export default HookComp

/**
 * 复用一个有状态的组件引发的思考:
 * 
    HOC【高阶组件: 一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件】使用的问题：
    嵌套地狱，每一次HOC调用都会产生一个组件实例
    可以使用类装饰器缓解组件嵌套带来的可维护性问题，但装饰器本质上还是HOC
    包裹太多层级之后，可能会带来props属性的覆盖问题

    Render Props【渲染属性】：
    数据流向更直观了，子孙组件可以很明确地看到数据来源
    但本质上Render Props是基于闭包实现的，大量地用于组件的复用将不可避免地引入了callback hell问题
    丢失了组件的上下文，因此没有this.props属性，不能像HOC那样访问this.props.children
 * 

    涉及优化对比 函数组件 hook 和 class 【类】组件、函数组件
    
    useCallback 和 useMemo 区别    
    useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs)
    useCallback和useMemo的参数跟useEffect一致
    useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，
    useMemo返回缓存的变量，useCallback返回缓存的函数。
 * 唯一的区别是：useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你
    
    demo: useMemo 的用法
    export default function WithMemo() {
        const [count, setCount] = useState(1);
        const [val, setValue] = useState('');
        const countSum = useMemo(() => {
            console.log('compute');
            let sum = 0;
            for (let i = 0; i < count * 100; i++) {
                sum += i;
            }
            return sum;
        }, [count]);
    
        return <div>
            <h4>{count}-{countSum}</h4>
            {val}
            <div>
                <button onClick={() => setCount(count + 1)}>+c1</button>
                <input value={val} onChange={event => setValue(event.target.value)}/>
            </div>
        </div>;
    }

    demo: useCallback 的用法
    function Parent() {
        const [count, setCount] = useState(0);
        const [val, setVal] = useState('');

        const callback = useCallback(() => {
            return count;
        }, [count]);

        return <div>
            <p>{count}</p>
            <Child callback={callback}/>
            <div>
                <input value={val} onChange={event => setVal(event.target.value)}/>
                <button onClick={() => setCount(count + 1)}>add</button>
            </div>
        </div>;
    }
 
    function Child({ callback }) {
        const [count, setCount] = useState(() => callback());
        useEffect(() => {
            setCount(callback());
        }, [callback]);
        return <div> {count} </div>
    }
    使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，
    如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，
    然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新
    
    所有依赖本地状态或props来创建函数，需要使用到缓存函数的地方，都是useCallback的应用场景
 * 
 * 和 函数组件 class【类】 组件对比
 * import React, { PureComponent } from 'react'
 * import React, { Component } from 'react'
 * React.memo(comp) 是React v16.6引进来的新属性
 * React.memo会返回一个纯化(purified)的组件MemoFuncComponent
 * 当组件的参数props和状态state发生改变时，React将会检查前一个状态和参数是否和下一个状态和参数是否相同，如果相同，组件将不会被渲染，如果不同，组件将会被重新渲染
 * 它的作用和React.PureComponent类似，是用来控制函数组件的重新渲染的。React.memo(...) 其实就是函数组件的 React.PureComponent
 * 
 * demo:
 * class: Component 需要判断何时渲染 何时不会进行组件的重新渲染
 * shouldComponentUpdate(nextProps, nextState) {
        if (this.state.count === nextState.count) {
            return false
        }
        return true
    }
 *  const Funcomponent = ()=> {
        return (
            <div>
                Hiya!! I am a Funtional component
            </div>
        )
    }
    const MemodFuncComponent = React.memo(FunComponent)
    
    React.PureComponent是给ES6的类组件使用的
    React.memo(comp)是给函数组件使用的
    React.PureComponent减少ES6的类组件的无用渲染
    React.memo(comp)减少函数组件的无用渲染
    继承PureComponent时，不能再重写shouldComponentUpdate
    useEffect、useMemo、useCallback都是自带闭包的。每一次组件的渲染，其都会捕获当前组件函数上下文中的状态(state, props)，
    所以每一次这三种hooks的执行，反映的也都是当前的状态，你无法使用它们来捕获上一次的状态。
    对于这种情况，应该使用ref来访问。
    依赖为 [] 时： re-render 不会重新执行 effect 函数
    没有依赖：re-render 会重新执行 effect 函数

    useLayoutEffect 和 componentDidMount 和 componentDidUpdate 触发时机一致（都在在DOM修改后且浏览器渲染之前）；
    useLayoutEffect 要比 useEffect 更早的触发执行；
    useLayoutEffect 会阻塞浏览器渲染，切记执行同步的耗时操作

    关于class 组件的 createRef
    class RefTest extends React.Component{
        constructor(props){
            super(props);
            this.myRef = React.createRef();
        }
        componentDidMount(){
            console.log(this.myRef.current);
        }
        render(){
            return <input ref={this.myRef}/>
        }
    }
 * 
*/

// React 组件种类
// 1 Es5原生方式React.createClass定义的组件
// const Eg1 = React.createClass({
//     getInitialState:function(){
//       return {
//            name:'react'
//       };
//     },
//     render:function(){
//         return  <div onClick={this._ClickEvent}>{ this.state.name }</div>
//     },
//     _ClickEvent:function(){
//         console.log(`事件`)
//     }
// })

// 2 无状态组件 【功能组件】
function Eg2(props){
    return <div>{ props.name }</div>
}

// 3 类组件 【有状态组件 or 容器组件】
class Eg3 extends Component {
    constructor(props){
        super(props)
        this.state = {
            
        }
    }
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

// 4 渲染组件 与 无状态组件类似
const Eg4 = (props) => {
    return (
        <div>{ props.name }</div>
    )
}

// 5 高阶组件 HOC 【不要在 render 方法中使用 HOC】
// 一个高阶组件是一个函数，它输入一个组件，然后返回一个新的组件 const EnhancedComponent = higherOrderComponent(WrappedComponent);
function Eg5(WrappedComponent) {
    // HOC设置显示名称
    Eg5.displayName = `Eg5(${getDisplayName(WrappedComponent)})`;

    return class extends React.Component {
      componentDidUpdate(prevProps) {
        console.log('Current props: ', this.props);
        console.log('Previous props: ', prevProps);
      }
      
      render() {
        return <WrappedComponent {...this.props} />;
      }
    }
}

// HOC设置显示名称
function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || "Component";
}

// 6 function + hook 组件

/**
 *  React Fiber 【Fiber 架构就是用 异步的方式解决旧版本 同步递归导致的性能问题】
    旧版 React 通过递归的方式进行渲染，使用的是 【JS引擎自身的函数调用栈】，它会一直执行到栈空为止。
    Fiber实现了自己的【组件调用栈】，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执行的任务。
    实现方式是使用了浏览器的 requestIdleCallback 这一 API:
    将 计算任务 分给成一个个小任务，分批完成，在完成一个小任务后，将控制权还给浏览器，让浏览器利用间隙进行 UI 渲染

    React Fiber 出现的背景：
    当页面元素很多，且需要频繁刷新的场景下，浏览器页面会出现卡顿现象，原因是因为 计算任务 持续占据着主线程，从而阻塞了 UI 渲染
    
    React 框架内部的运作可以分为 3 层
    Virtual DOM 层 --> 描述页面长什么样
    Reconciler 层 --> 负责调用组件生命周期方法，进行 Diff 运算等。
    Renderer 层 --> 根据不同的平台，渲染出相应的页面，比较常见的是 ReactDOM 和 ReactNative
 * 
 * Fiber 其实指的是一种数据结构，它可以用一个纯 JS 对象来表示
 * 
 * const fiber = {
        stateNode,    // 节点实例
        child,        // 子节点
        sibling,      // 兄弟节点
        return,       // 父节点
    }

    Fiber Reconciler 的 2 个阶段:
    阶段一，生成 Fiber 树【本质来说是一个链表】，得出需要更新的节点信息。这一步是一个渐进的过程，可以被打断。
    【让优先级更高的任务先执行，从框架层面大大降低了页面掉帧的概率】
    阶段二，将需要更新的节点一次过批量更新，这个过程不能被打断

    阶段一有两颗树，Virtual DOM 树和 Fiber 树，Fiber 树是在 Virtual DOM 树的基础上通过额外信息生成的。
    它每生成一个新节点，就会将控制权还给浏览器，如果浏览器没有更高级别的任务要执行，则继续构建；反之则会丢弃 正在生成的 Fiber 树，等空闲的时候再重新执行一遍
    
    【V16版本之前】栈调和（Stack reconciler） --> 【V16版本之后】 Fiber reconciler

    React diff 将传统 diff 算法的复杂度 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题
    React Diff三大策略: 【将 Virtual DOM 树转换成 actual DOM 树的最少操作的过程称为 协调（Reconciliaton）】
    1.tree diff: 【Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计】
        React对 Virtual DOM 树进行层级控制，只会对相同层级的DOM节点进行比较，即同一个父元素下的所有子节点，
        当发现节点已经不存在了，则会删除掉该节点下所有的子节点，不会再进行比较。
        这样只需要对DOM树进行一次遍历，就可以完成整个树的比较。复杂度变为O(n);
    2.component diff: 【拥有相同类的两个组件 生成相似的树形结构,拥有不同类的两个组件 生成不同的树形结构】
    3.element diff: 【对于同一层级的一组子节点，通过唯一id区分】 当节点属于同一层级：插入、移动、删除 【设置唯一 key的策略】
 */

 未经允许，请勿随意转载！！谢谢合作！！！