React Hooks之useState（一）

现有如下一个React应用：

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

class App extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = { text: "", checked: false };
  }
  render() {
    const { text, checked } = this.state;
    return (
      <div>
        <input
          type="text"
          value={text}
          onChange={e => this.setState({ text: e.target.value })}
        />
        <input
          type="checkbox"
          checked={checked}
          onChange={e => this.setState({ checked: e.target.checked })}
        />
        <ul>
          <li>{text}</li>
          <li>{checked.toString()}</li>
        </ul>
      </div>
    );
  }
}

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

我们看到App组件是类组件，因为这里用到了state。state对象有两个值，一个是输入框的text值，一个是复选框的勾选值。这个应用做的事情，就是监控输入框text值的变化和复选框勾选值的变化（用了ul来显示state的变化）。

由于React引入了React Hooks，什么是Hooks？说简单点就是可以完全不用类来写组件了，那用什么写？函数。函数怎么使用state？使用userState函数。下面我们看看怎么用函数实现上述功能。

//导入useState
import React, { useState } from "react";
import ReactDOM from "react-dom";

//函数组件
function App() {
  //useState的参数为初始状态值，返回了一个长度为2的数组，第一个元素就是我们类组件里的state对象，第二个元素是个函数，作用相当于类组件里用的setState。这两个元素的名字随便是什么都可以
  const [state, setState] = useState({ text: "", checked: false });
  //此函数的参数为整个state的部分内容，在调用setState的时候，用这个部分内容更新对应的老的内容
  const updateState = partialState =>
    setState(oldState => ({
      ...oldState,
      ...partialState
    }));
  return (
    <div>
      <input
        type="text"
        value={state.text}
        onChange={e =>
          updateState({
            text: e.target.value
          })
        }
      />
      <input
        type="checkbox"
        checked={state.checked}
        onChange={() => updateState({ checked: !state.checked })}
      />
      <ul>
        <li>{state.text}</li>
        <li>{state.checked.toString()}</li>
      </ul>
    </div>
  );
}

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

至于state怎么设计，是分开一个一个处理还是像在本例中集中在一个对象管理，悉听尊便。

React Hooks之useState（一）

猜你喜欢