react hook 基础属性整理

1.函数组件定义；

function Header(props) {
  return (
    <div>这是一个函数组件</div>
  )
}
export default Header

2.引入useState及使用；

使用useState来定义及初始化一个状态；使用const定义一个数组，第一个参数是定义的状态，useState里的内容为赋予的值；第二个参数是setXX，用来修改定义的状态；如const [XX, setXX]=useState(""),这就是定义了XX为一个字符串。

import React, {useState} from "React"; //解构引入
function Header(props) {
  const [name, setName] = useState("张三") //name的初始值是“张三”，使用setName("李四")可以进行修改
  return (
    <div onClick={()=>{setName(“李四”)}}>{ name }</div> 
  )
}
export default Header

3.useEffect;

给没有生命周期的组件，添加结束渲染的的信号。在render之后才执行（相当于componentDidMount生命周期）。

import React, { useState, useEffect } from "React"; //解构引入
function Header(props) {
  const [name, setName] = useState("张三");
  //1.useEffect的第一个参数是一个函数；
  //2.每次每个state状态的改变都会触发useEffect的执行，所以需要接收第二个参数，一个依赖数组，只有数组中的state发生改变，才会执行useEffect；
  useEffect(() => {
    console.log(name);
    document.body.addEventListener('a', ()=> {});
    return () => {
      //3.参数的函数中，接收一个return函数，先执行return函数，再执行参数函数本身
      console.log("销毁");
      document.body.removeEventListener('a', ()=> {});//保证只会添加一次事件
    }
  }, [name]) //只有name改变才会触发useEffect重新执行
  return (
    <div onClick={()=>{setName(“李四”)}}>{ name }</div> 
  )
}
export default Header；

4.useLayoutEffect;

是dom更新完成后执行的某个操作；相当于componentWillmount。
不同： useLayoutEffect比useEffect先执行： 相同： useLayoutEffect一样，接收两个参数，1.参数函数；2.依赖数组；3.参数函数中也存在一个return函数，先执行return函数，再执行参数函数

import React, { useState, useEffect, useLayoutEffect } from "React"; //解构引入
function Header(props) {
  const [name, setName] = useState("张三");
  useEffect(() => {
    console.log("useEffect")
  }, []) 
  useLayoutEffect(() => {
    console.log("useLayoutEffect")
  }, [])
  return ( 
    <div onClick={()=>{setName(“李四”)}}>{ name }</div> 
  )
}
export default Header；

5.useMemo;

import React, { useState, useMemo } from "React"; //解构引入
function Header(props) {
  const [num, setNum] = useState(1);
  //1.接收一个函数作为参数；
  //2.接收一个数组作为依赖列表；
  //3.useMemo返回的是一个值，不是函数
  const doubleNum = useMemo(() => {
    return 2*num
  })
  return ( 
    <div onClick={()=>{setNum((a => a++))}}>{ doubleNum }</div> 
  )
}
export default Header；

6.useCallback;

让组件中的函数跟随状态更新；

import React, { useState, useEffect, useCallback } from "React"; //解构引入
function Header(props) {
  const [num, setNum] = useState(1);
  //1.接收一个函数作为参数；
  //2.接收一个数组作为依赖列表；
  //3.useCallback返回的是一个函数，不是值，这也是和useMemo的区别
  const changeNum = useCallback(()=> {
    console.log(“数字加1啦！”)
  }, [num]) //只有num变化的时候才会去打印
  return ( 
    <div onClick={()=>{setNum((a => a++))}}>{ changeNum() }</div> 
  )
}
export default Header；

7.useRef;

返回一个子元素索引，此索引在整个生命周期中不会发生改变，对象及属性改变时不会通知，不重新渲染;

import React, { useState, useEffect, useRef } from "React"; //解构引入
function Header(props) {
  //保存一个值，全局都不会改变；
  //重新赋予ref.content，不会发生重新渲染
  const ref = useRef();
  console.log(ref)
  useEffect(() => {
    ref.current = setInterval(()=>{
      num ++
    }, 400)
  }, [])
  useEffect(() => {
    if (num>10)
      clearInterval(ref.current); //取到全局都不会改变的内容，进行清理
  }, [num])
  return ( 
    <div>{ num }</div> 
  )
}
export default Header；

8.createContentx和useContext

上层数据发生改变，肯定会触发重新渲染。

//1.引入useContext和createContext；
import React, { useState, useEffect, useContext, createContext } from "React"; //解构引入
//2.通过createContext创建一个context;
const Context = createContext(null);
function Index() {
  const [num, setNum] = useState(1);
  return 
  <div>
    {num}
    <Child1 num={num}></Child1> //正常传参
    <Child2 num={num}></Child2> //正常传参
    //3.使用<Context.Provider></Context.Provider>创建一个数据共享范围
    <Context.Provider value={num}> //4.使用value传递共享数据
      //共享数据范围
      <Child1></Child1> 
      <Child2></Child2>
    </Context.Provider>
  </div>
}

function Child1(props) {
  //5.在子组件中使用useContext来接收数据
  const num = useContext(Context);//就可以接收并使用num啦
  return <div>child1：{props.num}</div>//props.正常接参
}
function Child2(props) {
  return <div>child2：{props.num}</div>//props.正常接参
}

9.useReducer;

从其余组件中获取状态。

import React, { useState} from "React";
//1.创建数据仓库store和分发者reducer
const store = {
  num: 1
};
const reducer = (state, action)=> {
  switch (action.type) {
    case "changeNum":
    return {
      ...state,
      num: action.num
    }
    defaule: 
    return {
      ...state
    }
  }
}

function Index() {
  //2.使用useReducer(reducer, store)来获取store和dispatch
  const [state, dispatch] = useReducer(reducer, store)
  //3.通过dispatch修改值，使用state.获取值
  return 
  <div onClick={()=>dispatch({
   type: "changeNum",
   num: 10
  })}> 
    {state.mun} 
  </div>
}