hooks

hooks的使用。

useState

实现原理

function useState(initialState) {
  // 当前状态值
  let state = initialState;
  // 更新状态的函数
  const setState = (newState) => {
    state = newState;
    // 触发组件重新渲染
    // （这里的重新渲染逻辑是一种简化，实际上React内部使用了更复杂的机制）
    render();
  };

  return [state, setState];
}

const [count, setCount] = useState() 初始化时最好加个初始值或者null，setCount()可以接受一个对象或者函数，地址要改变。

useEffect

“副作用”（Side Effect）通常指的是在组件渲染过程之外发生的操作，例如数据获取、DOM 操作、订阅事件等。副作用可能会影响组件的状态或UI，但它们通常不是组件渲染的一部分。

实现原理： 获取当前组件的Fiber节点，创建一个Effect对象，包含effectFunction和dependencies，检查effect是否已存在于currentFiber的effects列表中，如果effect已存在，则更新它，否则添加新effect。如果dependencies为空或任何一个依赖项发生变化，执行effectFunction

useEffect 接受两个参数：effectFunction（副作用函数）和 dependencies（依赖项数组）。它会在组件渲染时将这些参数保存到当前组件的 Fiber 节点中，并在渲染结束后根据依赖项数组的变化来决定是否执行 effectFunction。

一开始会执行一次，每次render后看依赖执行

• 使用[]作为第二个参数，等价于componentDidMount
• 指定依赖，等价于componentDidUpdata
• 通过return，等价于componentWillUnmount

useContext

​ 先createContext() 创造一个对象，然后在对象.Provider 通过value={}将要共享的数据和改变数据的方法传下去，对象.Provider圈定作用域，在作用域内通过useContext拿到对应的数据和方法。

useReducer（复杂版useState）

​ 创造一个操作函数reducer(state, action)，然后传给const {state,dispatch}=useReducer（reducer，{}），调用dispatch写({type: ‘操作类型’})

useRef

• 可以获取dom节点对其进行操作
• 保持变量的持久性: useRef 创建的 ref 对象在组件的重新渲染过程中保持不变。这意味着你可以在多次渲染之间存储和访问变量的值，而不会触发重新渲染。这对于存储组件的状态而不触发渲染的情况非常有用。
• 在函数组件之间共享数据: 还可以用于在函数组件之间共享数据，因为它的值在重新渲染之间保持不变。这可以用于实现一些需要跨组件共享的功能，而不需要引入全局状态管理。

useMemo(比useEffect先执行)

​ 第一个参数是（）=> value 第二个参数是依赖，只有当依赖变化时才会重新计算新的value，相当于shouldComponentUpdate。返回的是值

useCallback

​ 和useMemo差不多，返回的是一个函数。

forwardRef

用于将 ref 传递给子组件，以便从父组件中访问子组件的 DOM 元素或实例

useImperativeHandle

用于在函数组件内部定义对外暴露的方法。它通常与 forwardRef 一起使用，以在子组件中定义可通过 ref 访问的方法。

import React, { forwardRef, useRef, useImperativeHandle } from 'react';
// 子组件
const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  // 使用 useImperativeHandle 定义要暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    focusInput: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} />;
});
// 父组件
function ParentComponent() {
  const childRef = useRef(null);
  const handleClick = () => {
    // 调用子组件的方法
    childRef.current.focusInput();
  };
  return (
    <div>
      <button onClick={handleClick}>Focus Child Input</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}
export default ParentComponent;