记录 React Hooks 学习

动机、解决了什么问题

1. State Hook 简单来讲 组件分为三种、无状态组建能够经过function 编写、可是有了 hooks ，能够很轻易的写出带状态的组件
2. Effect Hook 可让你在函数组件中执行一些具备effect（反作用）的操做;每次render以后都会执行effect至关于DidMonut 和 DidUpdate,若是须要对指定的参数进行监听,能够在useEffect的 参数 2 传入一个 state

特别注意事项：hooks 是函数，因此 JS 函数有的闭包问题，hooks 中也会发生、因此须要合理规避闭包陷

useState

import React, { useState } from "react";

const Counter = props => {
  const [count, setCount] = useState(0); // count 状态变量 setCount set函数 useState(0);//使用hooks状态
  // 0 count 默认值
  const [num, setNum] = useState(0);

  return (
    <div> <article> {/* 不能使用count + 1 ，会报错count 是只读 */} <button onClick={() => setCount(count - 1)}>--</button> <span>count:{count}</span> <button onClick={() => setCount(count + 1)}>++</button> </article> </div>
  );
};
复制代码

memo

//哪怕 并无更新 也会触发子组件从新渲染 因此须要 memo 来缓存
import React, { useState, memo } from "react";

const Counter = props => {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(100);

  return (
    <div> <span>useState</span> <Child name={"child render test"} /> <article> {/* 不要写成count ++ 会报错 count is read-only */} <button onClick={() => setCount(count - 1)}>--</button> <span>count:{count}</span> <button onClick={() => setCount(count + 1)}>++</button> </article> <article> <button onClick={() => setNum(num - 1)}>--</button> <span>num:{num}</span> <button onClick={() => setNum(num + 1)}>++</button> </article> </div> ); }; export default Counter; const Child = memo(props => { console.log("child Render"); const [state, setState] = useState(1); return ( <div> {props.name} {state} </div> ); }); 复制代码

useEffect

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

const EffectCom = prop => {
  const [title, setTitle] = useState("defaultTitle");

  // 在`DidMount` 和 `DidUpdate` 以后都会执行，若是须要对指定的参数进行监听,能够在`useEffect`的 参数2 传入一个 `state`, but 、传入监听参数、也会只当相似`Didmount`的事件
  useEffect(eff => {
    console.log(eff);
    document.title = title;
  }, title);

  console.log(title);
  return (
    <div> <span>Effect Hook</span> <article> <p>title:{title}</p> </article> </div>
  );
};

export default EffectCom;
复制代码

useCallback

// 在函数组件中 若是数据变化、会引发数据从新渲染、因此须要使用到 `useCallback` 来解决这种问题

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

const EffectCom = prop => {
  const [title, setTitle] = useState("defaultTitle");
  const [state, setState] = useState(1);
  useEffect(
    eff => {
      console.log("useEffect");
      document.title = title;
    },
    [state]
  );

  const changeTitle = () => {
    setState(state + 1);
    setTitle("changeTitle::" + state);
  };
  //每次都执行了，说明有闭包调用问题、每次hello函数都会被从新声明，这是有问题的，须要缓存起来，在特定的时候才须要更新
  console.log("hello");
  // const hello = () => {
  // console.log("hello");
  // };

  // 有了这样一层、 hello 函数并不会在每次都从新声明来占用内存，而是在state 变化的时候才从新声明，能够节约内存
  const hello = useCallback(() => {
    console.log("hello");
  }, [state]);

  console.log(title);
  return (
    <div> <span>Effect Hook</span> <article> <p onClick={hello}>title:{title}</p> <button onClick={changeTitle}>changeTitle</button> </article> </div>
  );
};

export default EffectCom;
复制代码

若是bug、理解有误、用词不当，欢迎指出

第一次发掘金，但愿能和你们一块儿学习，一块儿进步

示例代码地址