函数式声明组件

我们已经移除了Square组件的constructor函数。事实上，对于Square这样，仅仅由render方法构成的组件，React有一种更简单的声明组件的语法，叫函数式声明组件。不必用extends React.Component来定义组件，你仅仅只需写一个函数，它接受属性，返回需要被渲染的东西即可。

用下面这个函数替换掉整个Square的类：

code

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

你需要把两个this.props都换成props。你的app中，很多组件都能写成函数式声明的组件。这样的组件更容易写，而且React以后也会继续优化它们。

整理代码时，我们把onClick={() => props.onClick()}也换成onClick={props.onClick}。因为对于本案例来说，把函数传下来就已经足够了。注意，写成onClick={props.onClick()}是不行的，因为它会立即调用props.onClick，而不是如我们所想的把它传下来。

查看最新的代码