1.聊一聊useState

useState是react框架 hooks中最常用且用法最简单的一个hook，关于其基础特性无需赘述，我们直接来了解其使用的两种方式。

useState的使用分为 值更新 和 函数式更新

值更新：顾名思义，就是在setState方法中直接赋上一个值，比如setCount(1)
函数式更新：则是为setState方法中传入一个函数，该函数将接收先前的 state，并返回一个更新后的值，比如setCount(prevCount => prevCount - 1)

下面的计数器组件示例展示了 setState 的两种用法：

import { useState } from "react";
import * as ReactDOM from "react-dom";

function App() {
  function Counter({initialCount}) {
    const [count, setCount] = useState(initialCount);
    return (
      <>
        Count: {count}
        <button onClick={() => setCount(initialCount)}>Reset</button>
        <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
        <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      </>
    );
  }
  return (
    <div>
      {Counter({initialCount:1})}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

“+” 和 “-” 按钮采用函数式形式，因为被更新的 state 需要基于之前的 state。但是“重置”按钮则采用普通的赋值形式，因为它总是把 count 设置回初始值。

注意

与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

• 先看看class组件中如何更新对象：

import React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component{
  state = {
    myInfo: {name: 'man', age: 20, favous: '苹果'}
  }

  changeData = ()=>{
    const {myInfo} = this.state;
    // 仍然可使用对象形式
    this.setState({     
      myInfo: {
        ...myInfo,
        ...{favous: '橘子'}
      }
    });
  }

  render(){
    const {myInfo} = this.state;
    console.log(myInfo)
    return (
      <div>
        我的名字: {myInfo.name},
        我爱吃：{myInfo.favous}
        <br/>
        <button onClick={this.changeData}>我爱吃橘子</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

可以看到，在class组件中使用setState更新对象可以直接使用对象赋值方式。

• 再来看看函数式组件如何更新对象：

import { useState } from "react";
import * as ReactDOM from "react-dom";

function App() {
  function Fruits(myInfo) {
    const [data, setData] = useState(myInfo);

    const changeData = ()=>{
      setData(prevState => {
        // 也可以使用 Object.assign
        return {...prevState, ...{favous: '橘子'}};  // 展开运算符
      });
    }
    return (
      <>
        我的名字: {data.name},
        我爱吃：{data.favous}
        <br/>
        <button onClick={changeData}>我爱吃橘子</button>
      </>
    );
  }

  const myInfo = {name: 'man', age: 20, favous: '苹果'};
  return (
    <div>
      {Fruits(myInfo)}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

而在函数式组件中更新一个对象必须使用函数式更新，在函数里面返回一个新的对象。