React Hooks笔记

useState

• 作用
  返回状态和设置状态的函数
• 用法
  const [data, setData] = useState({})
• 参数
  初始值

useEffect

• 作用
  替代 componentWillMount componentDidUpdate

• 用法

  useEffect(() => {
  // 默认监听 componentWillMount componentDidUpdate
  console.log(`click ${count} 了 一下`);
  });
  
  useEffect(() => {
  // 参数2表示要监听的state [count] 如果是空数组表示只执行一次
  console.log(`请求数据 了 一下`);
  
  return () => {
    //effect里return一个函数表示组件销毁时执行  相当于componentWillUnmount
    alert("effect 组件销毁了");
  };
  }, []); // 页面初始化请求ajax数据可以写空数据

• 参数
  参数1：要执行的函数，有返回值且返回值为函数时表示组件销毁时执行的函数。
  参数2：要监听的state，格式为数组，如果为空数组表示执行一次

useContext

• 作用
  生成一个当前子组件全局的上下文，配合useReducer可以实现Redux的效果
• 用法

创建一个context

import React, { createContext } from "react";

export default createContext()

引入context 和 应用组件

import React, { useState } from "react";
import Context from "./Context";
import App from "./App";

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

  return (
    <div>
      <h4>useContext</h4>
      click:{count}
      <button onClick={() => setCount(count + 1)}>click</button>
      <Context.Provider value={count}>
        {/* value 表示上下文要传递的数据 */}
        <App />
      </Context.Provider>
    </div>
  );
};

应用组件App

import React, { useContext } from "react";
import Context from "./Context";

export default () => {
  const count = useContext(Context); // 获取Provide里的数据 和redux connect有点像
  return (
    <div>
      <h4>ContextSub</h4>
      click:{count}
    </div>
  );
};

• 参数

可不写 参考这里

useReducer

• 作用

单独使用生成局部的一组state和action，配合useContext可以实现Redux的效果

• 用法

const [state, setState] = useReducer(
    (state, data) => {
      return { ...state, ...data };
    },
    { count: 0 }
  );

• 参数
  参数1：reducer函数
  参数2：state的初始值

useMemo

• 作用
  提高性能，父组件的state变更会引起子组件的某些函数重新执行，useMemo可以定向控制子组件函数是否执行
• 使用

父组件

import React, { useState } from "react";
import Sub from "./Sub";

export default () => {
 const [time1, setTime1] = useState(0);
 const [time2, setTime2] = useState(1);

 console.log("parent 发生渲染");

 return (
   <div>
     <h3>useMemo</h3>
     <div>parent: {time1}</div>
     <button onClick={() => setTime1(Date.now())}>change parent</button>
     <button onClick={() => setTime2(Date.now())}>change sub</button>
     <Sub time={time2} />
   </div>
 );
};

子组件

import React, { useMemo } from "react";

export default ({ time }) => {
 console.log("sub 发生渲染");
 const getData = () => {
   console.log("%csub 获取数据", "background: green;color:#fff");
   return time + "数据";
 };

 const data = useMemo(() => getData(), [time]); // 阻止父组件变更导致子组件方法再次执行，只有当time发生改变时此方法才执行
 return (
   <div>
     <div>sub: {time}</div>
     <div>数据: {data}</div>
   </div>
 );
};

• 参数

参数1：要优化的函数
参数2：监听的state

useRef

• 作用

获取元素引用dom节点

• 用法

import React, { useRef } from "react";

export default () => {
  const inputRef = useRef();

  return (
    <>
      <input ref={inputRef} />
      <br />
      <button
        onClick={() => {
          console.log(inputRef);
          const val = Math.random();
          // 可以直接操作元素dom
          inputRef.current.value = val;
          inputRef.current.style.border = `5px solid #${Math.ceil(
            val * 1000000
          )}`;
        }}
      >
        change dom
      </button>
    </>
  );
};

• 参数

初始化值

完整代码案例