State Hooks useState

首先看一个React既有的版本基于 class 的组件.

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = { count: 0 };
  }

  render() {
    const { count } = this.state;
    return (
       <React.Fragment>
        <p>You clicked {count} times</p>
        <button onClick={() => setState({count : count + 1})}>
          Click me
        </button>
      </React.Fragment>
    );
  }

}

接下来我们看看用Hooks是如何实现的：

import React, { useState } from 'react';

export default () => {

  const [count, setCount] = useState(0);

  return (
    <React.Fragment>
      <p>You clicked { count } times</p>
      <button onClick={ () => setCount(count + 1) }>
        Click me
      </button>
    </React.Fragment>
  );
};

从代码结构上，减少了编码量。由原来的 class 组件变成 function 组件了。

不同的地方：

• 新加入了 useState 方法

• 通过 useState 钩子解构出了 state 与 setState 方法。

• state 的默认值，直接通过 useState 传入

• 更新 state 不再使用 setState 方法。

在线示例

如果有多个 state 怎么定义呢？

const [count, setCount] = useState(0);
const [name, setName] = useState(null);

除些之外，还可以作为一个对象来处理，如下：

const initialState = {
  username: null,
  mobile: null,
  email: null,
  password: null,
  submit: false
}

export default () => {

  const [state, setState] = useState(initialState);

  const onChange = (e, type) => {
    setState({ ...state, [type]: e.target.value });
  }

  return (
    <div className="example-rooter">
      <div>
        <span>用户：</span><input value={state.username} onChange={e => onChange(e, 'username')} />
      </div>
      <div>
        <span>电话：</span><input value={state.mobile} onChange={e => onChange(e, 'mobile')} />
      </div>
      <div>
        <span>邮箱：</span><input value={state.email} onChange={e => onChange(e, 'email')} />
      </div>
      <div>
        <span>密码：</span><input type={'password'} value={state.password} onChange={e => onChange(e, 'password')} />
      </div>
      <div>
        <button onClick={() => setState({ ...state, 'submit': !state.submit })}>提交</button>
      </div>
      {
        state.submit &&
        <React.Fragment>
          <p>您输入的信息是：</p>
          <span>用户名：{state.username}</span>
          <span>电话号码：{state.mobile}</span>
          <span>邮箱：{state.email}</span>
          <span>密码：{state.password}</span>
        </React.Fragment>
      }
    </div>
  );
};

在线示例