一文理解 React 的 props 和 state

先说说 props 和 state 是什么?

props 是 property 的缩写，即属性的意思。用于整个组件树中传递数据和配置，是父组件控制子组件的单向数据流传输的关键。

<HelloMessage name="John" />，name 就是自定义组件 HelloMessage 的属性，在当前组件中访问 props，通过this.props.属性名 的方式获取，即this.props.name。
子组件也可以通过这种方式获取到父组件中的内容。

不可以使用this.props直接修改 props，因为props是只读的。

state 本意是状态，每个组件都有一个初始状态，然后通过与用户交互，导致 state 改变，从而重新渲染 UI。

举例：通过点击按钮使一段文字发生改变

class LikeButton extends Component {
  constructor () {
    super()
    this.state = {    
      like: true
    }
  }

  handleClick () {
    this.setState({
      like: !this.state.like
    })
  }

  render () {
    const text = this.state.like ? '喜欢我😍' : '不喜欢我☹️'
    return (
      <div>
        <p>{text}</p>
        <button onClick={this.handleClick.bind(this)}>变来变去</button>
      </div>
    )
  }
}

上面这段代码可以通过点击 button 按钮，改变 state 中 like 的状态，like 是 true 时，text='喜欢我😍'，是 false 时，text='不喜欢我☹️'，每次改变都导致 render 函数重新渲染页面，因此呈现出不同的内容。

接下来，我根据《react 小书》写了里面的评论功能demo，有兴趣的可以进我的主页查看。