react 常用的hooks—useState、useEffect

React组件：可以分为类组件和函数式组件

1、函数式组件中没有state
2、函数式组件中没有生命周期（重点，涉及到生命周期的方法只能在类组建中定义）
可以借助react提供的hooks在函数式组建中做状态和方法
react对象有个useState函数，可以通过该函数创建状态,并且该函数是有返回值的：

useState

let [状态,修改该状态的方法] = useState(初始值);

const [count,setCount] = useState(0); 
console.log(useState(0)) //[0, ƒ]
1
2

1. 在同一个组件中可以使用 useState 定义多个状态
2. 注意 useState 返回的 setState 方法，不会进行对象合并
3. 注意 useState 返回的 setState 方法同样是异步方法

// hooks只能用在组件函数中的最顶层
import { useState } from "react";

function App() {
    // let [count,setCount] = useState(1);
    let [state, setState] = useState({
      count: 1
    });
    let { count } = state;
    const fn = () => {setState({count: count + 1})}
    return (
    <div>
      <p>{count}</p>
      {/* 第一种写法 */}
      {/*  {
        setState({
          count: count + 1
        })
      }}>递增 */}

        {/* 第二种写法 */}
       <button onClick={fn}>递增</button>
      
    </div>
    )
  }
  
export default App  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

函数组建的构成一般也是结构，分为三个部分：
1、state部分；2、操作状态的方法；3、return结构（如上面代码注释所示）
无论一个函数组件多么复杂都应该遵循这个解构来创建。

特别注意：使用useState 返回的 setState 方法，不会进行对象合并

// hooks只能用在组件函数中的最顶层
import { useState } from "react";

function App() {
  let [state, setState] = useState({
    name: "xiaochen",
    count: 1,
  });
  let { name, count } = state;
  console.log("render");
  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={({ target }) => {
          setState({
            ...state, //由于不会进行对象合并
            name: target.value,
          });
        }}
      />
      <p>{name}</p>
      <p>{count}</p>
      <button
        onClick={() => {
          setState({
            ...state, //由于不会进行对象合并
            count: count + 1,
          });
          console.log("修改");
        }}
      >
        递增
      </button>
    </div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

useEffect

useEffect 用法 页面加载 就渲染此方法 跟vue的created 的道理 还可以做信息依赖

useEffect(()=>{
  //副作用函数
  return ()=>{
    // 副作用函数的返还函数
  }
},[依赖参数])
1
2
3
4
5
6

• 依赖参数:
• 当不写依赖参数时，只要组件更新就会执行副作用函数；
• 当依赖参数为[ ]时，副作用函数只在挂载完之后执行；
• 写依赖参数，当监听参数修改时，或组件挂载时执行副作用函数。

useEffect(()=>{
   console.log('组件挂载时、count修改时就会执行执行');
 },[count]);
useEffect(()=>{
    console.log("挂载完成之后执行")
},[]);
useEffect(()=>{
    console.log("组件更新就会执行")
});
1
2
3
4
5
6
7
8
9

• 执行顺序：
• 挂载阶段: render --> 副作用函数
• 更新阶段: render --> 返回函数(即将更新) --> 完成更新(副作用函数)
• 卸载阶段:返回函数(即将卸载)