React这些你都知道吗？

function Child(props,ref){
  return (
    <input type="text" ref={ref}/>
  )
}
Child = React.forwardRef(Child);
function Parent(){
  let [number,setNumber] = useState(0); 
  // 在使用类组件的时候，创建 ref 返回一个对象，该对象的 current 属性值为空
  // 只有当它被赋给某个元素的 ref 属性时，才会有值
  // 所以父组件（类组件）创建一个 ref 对象，然后传递给子组件（类组件），子组件内部有元素使用了
  // 那么父组件就可以操作子组件中的某个元素
  // 但是函数组件无法接收 ref 属性 <Child ref={xxx} /> 这样是不行的
  // 所以就需要用到 forwardRef 进行转发
  const inputRef = useRef();//{current:''}
  function getFocus(){
    inputRef.current.value = 'focus';
    inputRef.current.focus();
  }
  return (
      <>
        <Child ref={inputRef}/>
        <button onClick={()=>setNumber({number:number+1})}>+</button>
        <button onClick={getFocus}>获得焦点</button>
      </>
  )
}

import React,{useState,useEffect,createRef,useRef,forwardRef,useImperativeHandle} from 'react';

function Child(props,parentRef){
    // 子组件内部自己创建 ref 
    let focusRef = useRef();
    let inputRef = useRef();
    useImperativeHandle(parentRef,()=>(
      // 这个函数会返回一个对象
      // 该对象会作为父组件 current 属性的值
      // 通过这种方式，父组件可以使用操作子组件中的多个 ref
        return {
            focusRef,
            inputRef,
            name:'计数器',
            focus(){
                focusRef.current.focus();
            },
            changeText(text){
                inputRef.current.value = text;
            }
        }
    });
    return (
        <>
            <input ref={focusRef}/>
            <input ref={inputRef}/>
        </>
    )

}
Child = forwardRef(Child);
function Parent(){
  const parentRef = useRef();// {current:''}
  function getFocus(){
    parentRef.current.focus();
    // 因为子组件中没有定义这个属性，实现了保护，所以这里的代码无效
    parentRef.current.addNumber(666);
    parentRef.current.changeText('<script>alert(1)</script>');
    console.log(parentRef.current.name);
  }
  return (
      <>
        <ForwardChild ref={parentRef}/>
        <button onClick={getFocus}>获得焦点</button>
      </>
  )
}

const EnhancedComponent = higherOrderComponent(WrappedComponent);

function CompHOC(WrappedComponent) {
  return class Comp extends React.Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}

<WrappedComponent {...this.props}/>
// is equivalent to [相当于]
React.createElement(WrappedComponent, this.props, null)

function HOC(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    render() {
      return super.render()
    }
  }
}

HOC.displayName = `HOC(${getDisplayName(WrappedComponent)})`
//or
class HOC extends ... {
  static displayName = `HOC(${getDisplayName(WrappedComponent)})`
  ...
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || 
         WrappedComponent.name || 
         ‘Component’
}

let add = (a, b)=>a+b
add(1,2) // 3

function add(x,y,z) {
    return z(x) + z(y);
}
add(-3, -4, Math.abs); // ==> Math.abs(-3) + Math.abs(-4) ==> 7

Math.abs(x) 函数返回指定数字 “x“ 的绝对值

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Demo extends Component {
    render() {
        return (
            <input />
        )
    }
}

ReactDOM.render(<Demo/>, document.getElementById('app'))

class Demo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value
        }
    }

    handleChange(e) {
        this.setState({
            value: e.target.value
        })
    }

    render() {
        return (
            <input value={this.state.value} onChange={e => this.handleChange(e)}/>
        )
    }
}

import  {  startTransition  }  from  'react' ;
 
// 显示输入的
setInputValue ( input ) ;
 
// 将内部的任何状态更新标记为转换 省去节流 输入框搜索调用接口
startTransition ( ( )  =>  { 
  // Transition: 显示结果
  setSearchQuery ( input ) ; 
} ) ;

npm install eslint-plugin-react-hooks --save-dev

// 你的 ESLint 配置
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}

constructor(){
  super()
  this.state={count:0}
}
// Hooks模拟constructor
const [count setCount]=useState(0)

componentDidMount(){
 console.log('componentDidMount')
}
// Hooks模拟 componentDidMount
useEffect(()=>console.log('componentDidMount'),[])
// useEffect拥有两个参数，第一个参数作为回调函数会在浏览器布局和绘制完成后调用，因此它不会阻碍浏览器的渲染进程，第二个参数是一个数组，也是依赖项
// 当依赖列表存在并有值，如果列表中的任何值发生更改，则每次渲染后都会触发回调
// 当它不存在时，每次渲染后都会触发回调
// 当它是一个空列表时，回调只会被触发一次，类似于componentDidMount

shouldComponentUpdate(nextProps,nextState){
   console.log('shouldComponentUpdate')
   return true //更新组件 反之不更新
}
// React.memo包裹一个组件来对它的props进行浅比较,但这不是一个hooks，因为它的写法和hooks不同，其实React.memo等效于PureComponent,但它只比较props

// 模拟 shouldComponentUpdate
const MyComponent = React.memo(
  whateverComponent,
  (prevProps,nextProps) => nextProps.count !== preProps.count
)

componentDidMount() {console.log('componentDidMount');}
componentDidUpate(){console.log('componentDidUpate')}
// Hooks模拟 componentDidUpdate
useEffect(()=>console.log('componentDidMount or componentDidUpate'))
// 这里的回调函数会在每次渲染后调用，因此不仅可以访问componentDidUpdate,还可以访问componentDidMount,如果只想模拟componentDidUpdate,我们可以这样来实现
const mounted = useRef()
useEffect(() => {
 if(!mounted.current){
    	mounted.current = true
    } else {
        console.log('componentDidUpate')
    }
})
// useRef在组件中创建“实例变量”，它作为一个标志来指示组件是否处于挂载或更新阶段。当组件更新完成后在会执行else里面的内容，以此来单独模拟componentDidUpdate

componentWillUnmount(){
  console.log('componentWillUnmount')
}
// Hooks模拟 componentWillUnmount
useEffect(()=>{
// 此处并不同于willUnMount porps发生变化即更新，也会执行结束监听
// 准确的说：返回的函数会在下一次effect执行之前，被执行
 return ()=>{console.log('componentWillUnmount')}
},[])
// 当在useEffect的回调函数中返回一个函数时，这个函数会在组件卸载前被调用。我们可以在这里清除定时器或事件监听器

function Button() {
  const [buttonText, setButtonText] = useState("点击前");
  const handleClick = () => {
    setButtonText("点击后");
  };
  return <button onClick={handleClick}>{buttonText}</button>;
}

import React, { useState, useEffect } from "react";

const SetIntervalHooksComp = (props) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    // 当在 useEffect 的回调函数中返回一个函数时，这个函数会在组件卸载前被调用
    return () => clearInterval(timer);
    // count发生变化时再次执行
  }, [count]);

  return <div>{count}</div>;
};
export default SetIntervalHooksComp;

import React, { useRef, useEffect } from "react";

function UseRefHooksComp() {
  // 初始化一个useRef
  const content = useRef(null);

  useEffect(() => {
    // 通过.current获取
    console.log(content.current);
  }, []);

  return <div ref={content}>useRef用法</div>;
}

export default UseRefHooksComp;

import React, { useContext } from "react";
const UseContextHooksComp = () => {
  const AppContext = React.createContext({});

  const A = () => {
    const { name } = useContext(AppContext);
    return <p>我是A的子组件--{name}</p>;
  };

  const B = () => {
    const { name } = useContext(AppContext);
    return <p>我是B组件的名字--{name}</p>;
  };

  return (
    <AppContext.Provider value={{ name: "useContext-hook测试" }}>
      <A />
      <B />
    </AppContext.Provider>
  );
};
export default UseContextHooksComp;

import React, { useReducer } from "react";

const UseReducerComp = () => {
  const reducer = (state, action) => {
    console.log(state, "action", action);
    if (action.type === "add") {
      return {
        ...state,
        count: state.count + 1,
      };
    } else {
      return state;
    }
  };

  const addcount = () => {
    dispatch({
      type: "add",
    });
  };

  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <p>{state.count}</p>
      <button onClick={addcount}>count++</button>
    </>
  );
};
export default UseReducerComp;

import React, { Component, useState, useMemo } from "react";

class UseMemoComp extends Component {
  render() {
    return (
      <div>
        <p>useMemoComp test</p>
        <WithNoMemo />
        <WithMemo />
      </div>
    );
  }
}
// 不使用 useMemo
function WithNoMemo() {
  const [count, setCount] = useState(1);
  const [val, setValue] = useState("");

  function expensive() {
    console.log("compute");
    let sum = 0;
    for (let i = 0; i < count * 100; i++) {
      sum += i;
    }
    return sum;
  }

  return (
    <div>
      <h4>
        {count}-{val}-{expensive()}
      </h4>
      <div>
        <button onClick={() => setCount(count + 1)}>+c1</button>
        <input value={val} onChange={(event) => setValue(event.target.value)} />
      </div>
    </div>
  );
}

// 使用useMemo来执行昂贵的计算，然后将计算值返回，并且将count作为依赖值传递进去。这样，就只会在count改变的时候触发expensive执行，在修改val的时候，返回上一次缓存的值
function WithMemo() {
  const [count, setCount] = useState(1);
  const [val, setValue] = useState("");
  const expensive = useMemo(() => {
    console.log("compute");
    let sum = 0;
    for (let i = 0; i < count * 100; i++) {
      sum += i;
    }
    return sum;
  }, [count]);

  return (
    <div>
      <h4>
        {count}-{val}-{expensive}
      </h4>
      {val}
      <div>
        <button onClick={() => setCount(count + 1)}>+c1</button>
        <input value={val} onChange={(event) => setValue(event.target.value)} />
      </div>
    </div>
  );
}
export default UseMemoComp;

import React, { useState, useCallback } from "react";
const set = new Set();

// 每次修改count，set.size就会 +1，这说明useCallback依赖变量count，count变更时会返回新的函数；而val变更时，set.size不会变，说明返回的是缓存的旧版本函数
export default function UseCallbackComp() {
  const [count, setCount] = useState(1);
  const [val, setVal] = useState("");

  const callback = useCallback(() => {
    console.log(count, "count"); // 不会打印
  }, [count]);

  set.add(callback);

  return (
    <div>
      <h4>{count}</h4>
      <h4>{set.size}</h4>
      <div>
        <button onClick={() => setCount(count + 1)}>add</button>
        <input value={val} onChange={(event) => setVal(event.target.value)} />
      </div>
    </div>
  );
}

import React, { useState, useCallback, useEffect } from 'react';
function Parent() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        return count;
    }, [count]);
    return <div>
        <h4>{count}</h4>
        <Child callback={callback}/>
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)}/>
        </div>
    </div>;
}
 
function Child({ callback }) {
    const [count, setCount] = useState(() => callback());
    useEffect(() => {
        setCount(callback());
    }, [callback]);
    return <div>
        {count}
    </div>
}

import React, {
  Component,
  useRef,
  useImperativeHandle,
  forwardRef,
} from "react";

// forwardRef 引用传递（Ref forwading）是一种通过组件向子组件自动传递 引用ref 的技术
const MyFunctionComponent = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));
  return <input ref={inputRef} />;
});

class UseImperativeHandleComp extends Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  componentDidMount() {
    this.textInput.current.focus();
  }
  render() {
    return <MyFunctionComponent ref={this.textInput} />;
  }
}

export default UseImperativeHandleComp;

import React, { useState, useLayoutEffect, useEffect } from "react";

export default function UseLayoutEffectComp() {
  const [count, setCount] = useState(0);

  const onClick = () => {
    setCount((i) => i + 1);
  };
  useEffect(() => {
    console.log("useEffect"); // 后打印
  });

  useLayoutEffect(() => {
    // 改成 useEffect 试试
    console.log("useLayoutEffect"); // 先打印
  });

  return (
    <div>
      <h1>count: {count}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

// 总结：
// useEffect在浏览器渲染完成后执行
// useLayoutEffect在浏览器渲染前【在DOM更新后执行】执行

// useLayoutEffect总是比useEffect先执行
// useLayoutEffect里面的任务最好影响了Layout（布局）

// 注意：为了用户体验最好优先使用useEffect

function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}

// 官网 demo 使用 自定义 useReducer
function Todos() {
  const [todos, dispatch] = useReducer(todosReducer, []);

  function handleAddClick(text) {
    dispatch({ type: 'add', text });
  }

  // ...bla bla...
}

import React, { useState, useEffect } from 'react'

const useMousePosition = () => {
    const [position, setPosition] = useState({x: 0, y: 0 })
    useEffect(() => {
        const updateMouse = (e) => {
            setPosition({ x: e.clientX, y: e.clientY })
        }
        document.addEventListener('mousemove', updateMouse)
        return () => {
            document.removeEventListener('mousemove', updateMouse)
        }
    })
    return position
}

export default useMousePosition

// 在需要的地方引入然后调用即可
import React from 'react'
import useMousePosition from './useMousePosition'

function App() {
    const position = useMousePosition()
    return (
        <div>
            <div>x: {position.x}</div>
            <div>y: {position.y}</div>
        </div>
    )
}

function userDebounce(fn,delay,deps=[]){
    let {current} = useRef({fn, timer: null})
    setEffect(() => {
        current.fn = fn;
    },[fn]);

    return userCallback(function(...args){
        if(current.timer) clearTimeout(crurent.timer);
        current.timer = setTimeout(() => {
            current.fn.call(this,...args);
        },delay);
    },deps);
}

function useThrottle(fn,interval){
    let {current} = useRef({fn,timer:null});
    setEffect(() => {
        current.fn = fn;
    },[fn])

    return useCallback(function(...args){
        if(!current.timer){
            current.timer = setTimeout(() => {
                delete current.tiemer;
            },interval);
            current.fn.call(this,...args);
        }
    },deps);
}

// eleRef 是用 useRef 获得的 React元素引用
function useScrollPos(eleRef){
    const [pos,setPos] = useState([0,0]);
    useEffect(() => {
        function onScroll)(){
            setPos([eleRef.current.scrollLeft,eleRef.current.scrollTop]);
        }
        eleRef.current.addEventListener('scroll', onScroll);
        return () => {
            eleRef.current.removeEvenlistener('scroll',onScroll);
        }
    },[]);

    return pos;
}

function useTitle(title){
    setEffect(() => {
        document.tilte = title;
    },[])
}

function useWinSize() {
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  })
  const onResize = useCallback(() => {
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    })
  }, [])

  useEffect(() => {
    window.addEventListener('resize', onResize)
    return () => {
      window.removeEventListener('reisze', onResize)
    }
  }, [])

  return size
}

// 相比 setInterval, useInterval 就一个用处， delay 可以动态修改
function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let timer = setInterval(tick, delay);
    return () => clearInterval(timer);
  }, [delay]);
}

useCallback(fn,[m]);

等价于

useMemo(() => fn, [m]);