React 从零开始学习（六）—— 函数组件

今天来练习一下函数组件，首先从简单的做起，把 Square 组件重写为一个函数组件。

修改前：

import React from 'react'
import '../assets/css/Square.css'
class Square extends React.Component {
  render () {
    return (
      <button className="square"
        onClick={() => this.props.onClick()}>
        {this.props.value}
      </button>
    )
  }
}
export default Square

修改后：

import React from 'react'
import '../assets/css/Square.css'
function Square (props) {
  return (
    <button className="square"
      onClick={props.onClick}>
      {props.value}
    </button>
  )
}
export default Square

点击格子，和之前的效果一样：