react函数组件的hooks总结

        类组件和函数组件是react中的两种组件方式，类组件因为其有state以及生命周期等方法常常使用会比较多，函数组件也有一定的优势，由于其轻量级其实更符合函数编程的思想，而现在引入的hooks,更加丰富了函数组件的使用。hooks的使用让函数组件有了一个飞跃式的发展。

下面记录一下自己对hooks的一些总结：

useState: useState返回一个初始化的state值以及一个更改state的方法setAge,这边的定义是利用了解构赋值。useState解决了函数组件中没有state的问题。

const [age, setAge] = useState(42);

useEffect:useEffect解决了一些副作用问题，等同于生命周期函数componentDidmount,componentDidupdate,componentWillunmount相同的用途，只不过被合成了一个api,通过不同的传参，会有不同的组合效果。

useEffect可以接受两个参数：当useEffect(() => {}),此时等同于componentDidmount和componentDidupdate,在初始化和每次更新的时候会进行执行；当useEffect(() => {}, [props])时，此时等同于componentDidUpdate,只有当指定的props发生变化时，会执行回调函数。当useEffect( () => {return () => {}}),当useEffect拥有一个return时，此时在卸载阶段，会等同于执行componentWillUnmount,执行return里的回调函数。

那用useEffext模拟componentDidmount: useEffect(() => {},   [])

但是此时useEffect函数中接受不到最新的props,state,记得之前好像就遇到这样的问题

解决方法：可以通过useRef引用一个变量，然后来进行读和写

function Example(props) {
  // Keep latest props in a ref.
  const latestProps = useRef(props);
  useEffect(() => {
    latestProps.current = props;
  });

  useEffect(() => {
    function tick() {
      // Read latest props at any time
      console.log(latestProps.current);
    }

    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []); // This effect never re-runs
}

 

 

useCallback:可以通过useCallback来优化子组件的渲染

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

 

useMemo:把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。可以进行高销量计算的优化。

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

 

useRef: 通过ref引用获得一些ref对象，可以获得ref引用，可以获得组件的值，以及进行一些current.focus()操作

const refContainer = useRef(initialValue);

以上就是自己的一些总结，欢迎评论补充！！