从Mixin到HOC再到Hook|博客系列 | 前端进阶之旅

# Hooks

Hooks是React v16.7.0-alpha中加入的新特性。它可以让你在class以外使用state和其他React特性。

使用Hooks，你可以在将含有state的逻辑从组件中抽象出来，这将可以让这些逻辑容易被测试。同时，Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑。所以，它也可以作为一种实现状态逻辑复用的方案。

阅读下面的章节使用Hook的动机你可以发现，它可以同时解决Mixin和HOC带来的问题。

# 官方提供的Hooks

# State Hook

我们要使用class组件实现一个计数器功能，我们可能会这样写：

export default class Count extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>
          Click me
        </button>
      </div>
    )
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

通过useState，我们使用函数式组件也能实现这样的功能：

export default function HookTest() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => { setCount(count + 1); setNumber(number + 1); }}>
        Click me
        </button>
    </div>
  );
}