[JavaScript知识库]react hooks 笔记

useState

1. 语法：const [state,setState] = useState(initState)
2. 当initState是一个函数时，会将state的值初始化为函数的返回值。
3. 如果setState(newState)中newState与原来的state值或数据地址相同，那么组件不会进行更新。同样适用于state是一个引用类型的数据，例如：

	function App() {
	  const [state,setState] = useState({name:'init'})
	  function changeName(){
	    state.name = 'newName'
	    setState(state)//state的地址没有变化，所以不会更新组件，仍然用原来的值
	  }
	  return (
	    <div>
	      <p>{state.name}</p>
	      <button onClick={changeName}>切换name</button>
	    </div>
	  )
	}

4. 在更新state的作用域中无法获取最新的state，例如:

function App() {
  const [state,setState] = useState(0)
  function changeState(){
    setState(1)
    console.log(state)//点击按钮第一次输出0，后面都输出1，因为第一次更新的state需要在组件更新之后才能被获取，setState是一个异步过程。之后的state已经更新为1了，所以再按也是1
  }
  return (
    <div>
      <p>{state}</p>
      <button onClick={changeState}>切换state</button>
    </div>
  )
}

useReducer

1. 语法：const [state,dispatchNumber] = useReducer((state,action) => {...}),其中，state为状态值，dispatchNumber为函数，表示对state如何进行操作，useReducer接收函数，函数中需要指明state根据action指令如何改变，并将state值返回。一般用于对state有多种操作的情况。
2. 用法举例：

function App() {
  /* number为更新后的state值,  dispatchNumbner 为当前的派发函数 */
  const [number, dispatchNumbner] = useReducer((state, action) => {
    const { payload, name } = action;
    /* return的值为新的state */
    switch (name) {
      case "add":
        return state + 1;
      case "sub":
        return state - 1;
      case "reset":
        return payload;
    }
    return state;
  }, 0);
  return (
    <div>
      当前值：{number}
      {/* 派发更新 */}
      <button onClick={() => dispatchNumbner({ name: "add" })}>增加</button>
      <button onClick={() => dispatchNumbner({ name: "sub" })}>减少</button>
      <button onClick={() => dispatchNumbner({ name: "reset", payload: 666 })}>
        赋值
      </button>
    </div>
  );
}

useEffect

1. 语法：useEffect(() => {...},arrArgs)
2. 模拟类组件的生命周期函数，useEffect第一个函数为当前组件挂载时调用，第一个函数返回的函数在当前组件卸载时调用，arrArgs为组件更新的依赖项，以数组形式接收参数，当数组中任何一个数据变化，会造成当前组件重新卸载、挂载。当arrArgs为空数组时，表示只有在组件首次挂载时执行。后面一定要看react组件的生命周期，这段我自己总结的觉得有点问题

useContext

1. 语法：先创建上下文对象：const Context = React.createContext()，再在父组件中使用该上下文对象并且传入value给子组件提供值：<Context.Provider value={{name:'aaa'}}></Context.Provider>，子组件有两种方法获取父组件传入的上下文，方法一：<Context.Consumer>{(value) => {my name is {value.name}}}</Context.Consumer>

   方法二：const value = useContext(Context);return <div> my name is {value.name}</div>;

2. 案例：

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

const DemoContext = () => {
  const value: any = useContext(Context);
  /* my name is alien */
  return <div> my name is {value.name}</div>;
};

/* 用Context.Consumer 方式 */
const DemoContext1 = () => {
  return (
    <Context.Consumer>
      {/*  my name is alien  */}
      {(value) => <div> my name is {value.name}</div>}
    </Context.Consumer>
  );
};
function App() {
  return (
    <div>
      <Context.Provider value={{name:'z'}}>
        <DemoContext />
        <DemoContext1 />
      </Context.Provider>
    </div>
  );
}

export default App;

3. 官网解释

   const value = useContext(MyContext);

   useContext接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

   当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。

useRef

1. 基础解释：useRef 可以用来获取元素，缓存状态，接受一个状态 initState 作为初始值，返回一个 ref 对象 cur, cur 上有一个 current 属性就是 ref 对象需要获取的内容。
2. 基础用法：

//获取元素
function App() {
  const dom = useRef(null)
  return (
    <div>
      <p ref={dom}>一段文字</p>
      <button onClick={()=>{console.log(dom.current)}}>获取p</button>
    </div>
  );
}
//但是不能获取函数子组件实例，会报错

//保存状态，只要当前组件不被销毁，那么状态就会一直存在。
const status = useRef(false)
/* 改变状态 */
const handleChangeStatus = () => {
  status.current = true
}

useMemo

1. 语法：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

   官网：记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。

   理解：传入依赖项放到数组里面，依赖项的值变化时触发useMemo的第一个函数参数，第一个函数参数的返回值即memoizedValue，用于性能优化。

2. 缓存数据

function Scope(){
    const style = useMemo(()=>{
      let computedStyle = {}
      // 经过大量的计算
      return computedStyle
    },[])
    return <div style={style} ></div>
}

3. 缓存组件，减少子组件重新渲染的次数。

function Scope ({ children }){
   const renderChild = useMemo(()=>{ children()  },[ children ])
   return <div>{ renderChild } </div>
}

useCallback

1. useMemo 和 useCallback 接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于 useMemo 返回的是函数运行的结果，useCallback 返回的是函数，这个回调函数是经过处理的，例如：父组件传递一个函数给子组件的时候，由于是无状态组件每一次都会重新生成新的 props 函数，这样就使得每一次传递给子组件的函数都发生了变化，这时候就会触发子组件的更新，这些更新是没有必要的，此时我们就可以通过 usecallback 来处理此函数，然后作为 props 传递给子组件。
2. 案例

/* 用react.memo */
//子组件 其中props包括父组件App传入的函数参数getInfo
const DemoChildren = React.memo((props) => {
  /* 只有初始化的时候打印了 子组件更新 */
  console.log("子组件更新");
  useEffect(() => {
    props.getInfo("子组件");
  }, []);
  return <div>子组件</div>;
});

const App = ({ id }) => {
  const [number, setNumber] = useState(1);
  /* 此时usecallback的第一参数 (sonName)=>{ console.log(sonName) }
    经过处理赋值给 getInfo */
  const getInfo = useCallback(
    (sonName) => {
      console.log(sonName);
    },
    [id]
  );
  return (
    <div>
      {/* 点击按钮触发父组件更新 ，但是子组件没有更新 */}
      <button onClick={() => setNumber(number + 1)}>增加</button>
      <DemoChildren getInfo={getInfo} />
    </div>
  );
};

参考

1. https://juejin.cn/post/7118937685653192735#heading-15
2. https://react.docschina.org/docs/hooks-reference.html