react常用hook讲解

一.useState

useState是用来定义变量的 定义的方式有两种

1.直接定义 ``

const [x, setX] = useState('hahaha');

2.第二种定义方式 是一个箭头函数

const [y,setY]=useState(()=>{
//在里面会有一些复杂的逻辑
 const flag = true;
    if (flag) {
      return 1;
    } else {
      return 2;
    }
    // return 的值就是初始的值
})

例如设置一个点击事件

<div>
     <h1>{x1}</h1>
     <Button onClick={onClick}>改变x1</Button>
 </div>

useState全部异步体现如下

 const onClick = opt => {
      // 异步 (等一小会)
      setX1(x1 + 1)
      // prevState 上一次的值
      setX1(prevState => {
        console.log(prevState, 'prevState');
        // return 出去的值就是 x1 的值
        return prevState
      })
      console.log(x1, 'x1');
    }

二.useRef, createRef 区别

useRef	createRef
只执行一次	每次组件进行渲染的时候都会执行一次
指针不变	指针改变
可以拿dom的值	可以拿dom的值
可以保存上一次的值	不可以保存上一次的值
const ref=useRef(参数)	const ref=createRef()

<div>
      我是练习ref页面
      <p ref={ref2}></p>
      <p onClick={onClick}>我是x:{x}</p>
      <p ref={ref}>current.ref:{ref.current}</p>
    </div>

const ref = useRef();
  const ref2 = createRef();
  const [x, setX] = useState(1);
  const onClick = () => {
    ref.current = x; //可以获取到上一次值 1 2 3
    ref2.current = x;
    setX(x + 1);
  };
  console.log(ref.current, 'ref.current');
  console.log(ref2.current, 'ref2.current');
  useEffect(() => {
    console.log(ref, 'ref');
    console.log(ref2, 'ref2');
  }, []);

三.useEffect

useEffect模拟三个生命周期,可以重复声明多个

组件在请求后台接口的时候就是在这里请求 必须在这个生命周期里面请求

1. componentDidMount
2. componentDidUpdate
3. componentWillUnmount

 useEffect(() => {
     console.log(3);
   }, []);

 useEffect(() => {
     return () => {
        继续卸载
    };
   }, [x, y, z]);

四.useContext

useContext就是上下文

1. 为当前的 theme 创建一个 context（“light”为默认值）先建一个共用文件

import React from 'react';
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('');
export default ThemeContext;

父组件

import React from 'react';
import ChildOne from './ChildOne';
import ThemeContext from './common';
export default function Father() {
  return (
    <div>
      <p>我是父组件</p>
      <ThemeContext.Provider value="hello">
        <ChildOne />
      </ThemeContext.Provider>
    </div>
  );
}

第一个子组件

import React from 'react';
import ChildTwo from './ChildTwo';
export default function ChildOne() {
  return (
    <div>
      ChildOne
      <ChildTwo />
    </div>
  );
}

第二个子组件

import React, { useContext } from 'react';
import ThemeContext from './common';
export default function ChildTwo() {
  const aa = useContext(ThemeContext);
  console.log(aa);
  return <div>ChildTwo</div>;
}

五.父组件接收子组件的方法使用的生命周期 useImperativeHandle(ref,createHandle,[deps])

子组件：

import React, { forwardRef, useImperativeHandle } from 'react';

export default forwardRef(Children);
// 注意在子组件里面传递参数
function Children(props, ref) {
  const onClick = () => {
    console.log('我是子组件的onclick');
  };

  // 父组件接收子组件的方法使用的生命周期 useImperativeHandle(ref,createHandle,[deps])
  useImperativeHandle(
    ref,
    () => ({
      focus: () => {
        console.log('我是子组件的focus');
      },
      onClick,
    }),
    [],
  );
  return <div>我是子组件</div>;
}

父组件：

const ref = useRef();
  useEffect(() => {
    console.log(ref, 'ref');
    ref.current.onClick();
  });
  
    <div>
      我是hook useEffect
      <Children ref={ref} />
    </div>