react（11）——函数式组件钩子函数，React的三个方法usetState、useEffect和RefHook

1.useState

import React, { Component } from "react";

export default function Div2() {
  const [count, setCount] = React.useState(0);
  
  const handleAdd = () => {
    setCount((count) => {
      return count + 1;
    });
  };

  return (
    <div>
      <h2>Div2:{count}</h2>
      <button onClick={handleAdd}>点击+1</button>
    </div>
  );
}

1. React.useState()的返回结果是一个数组。
2. React.useState()将参数赋给返回数组中的第一个变量（count）。
3. React.useState()的返回数组的第二个变量（setCount）是一个函数，用来改变第一个变量（count）。
4. setCount的参数可以是一个值，将值直接赋值给count。如：

setCount(count+1);

5. setCount的参数可以是一个回调函数，将回调函数的返回值赋值给count。如：

setCount((count) => {
   return count + 1;
});

6. setCount钩子函数用来让函数式组件中也能拥有状态。

2.useEffect

React.useEffect(() => {
   setCount(count + 1);
}, [count]);

1. React.useEffect()有两个参数
2. 第一个参数是一个回调函数
3. 第二个参数是一个数组
4. 当组件挂载时会调用一次第一个回调函数
5. 当第二个参数（数组）中可以放入useState生成的状态
6. 当第二个参数（数组）中的状态发生改变的时候，会调用第一个参数回调函数
7. 第二个参数（数组）为空的时候，不管哪个状态发生改变，第一个参数回调函数都会被调用
8. 第一个参数回调函数可以有一个函数返回值，当组件被挂载的时候，会调用第一个参数回调函数的返回值函数，如下：

React.useEffect(() => {
  let timer = setTimeout(() => {
    setCount(count + 1);
  }, 1000);
  return clearTimeout(timer);
}, [count]);

3.useRef

import React from "react";

export default function Div2() {
  const myRef = React.useRef();

  const show =()=>{
    console.log(myRef.current.value);
  }

  return (
    <div>
      <h2>Div2:</h2>
      <input type="text" ref={myRef}/>
      <button onClick={show}>点我提示input框的内容</button>
    </div>
  );
}

1. React.useRef()返回值为一个ref对象
2. 可以通过这个ref对象获取结点的数据