Question

---

5.1 props

• 传入变量
• 传入函数
• 传入组件
• props.children

• 在形式上， props 之于 JSX 就相当于 attributes 之于 HTML 。从写法上来看呢，我们为组件传入 props 就可以像为 HTML 标签添加属性一样
• 在概念上，props 对于组件就相当于 JS 中参数之于函数。我们可以抽象出这样一个函数来解释

• props 几乎可以传递所有的内容，包括变量、函数、甚至是组件本身

props 是只读的

• 在 React 中， props 都是自上向下传递，从父组件传入子组件
• 并且 props 是只读的，我们不能在组件中直接修改 props 的内容
• 也即是说组件只能根据传入的 props 渲染界面，而不能在其内部对 props 进行修改

props 类型检查

正是因为 props 的强大，什么类型的内容都可以传递，所以在开发过程中，为了避免错误类型的内容传入，我们可以为 props 添加类型检查

props 默认值

由于 props 是只读的，我们不能直接为 props 赋值。 React 专门准备了一个方法定义 props 的默认值

import React from 'react'
import PropTypes from 'prop-types'

const Title = props => <h1>{props.title}</h1>

Title.defaultProps = {
  title: 'Wait for parent to pass props.'
}

Title.propTypes = {
  title: PropTypes.string.isRequired
}

5.2 state

• 初始化
• setState 方法
• 向下传递数据

• 在 React 中 state 也是我们进行数据交互的地方，又或者叫做 state management 状态管理。
• 一个应用需要进行数据交互，比如同服务器之间的交互，同用户输入进行交互。话反过来，从 API 获取数据，处理用户输入也就是我们需要用到 state 的时候

• 在新版本的 React 当中，我们通过类定义组件来声明一个有状态组件，之后在它的构造方法中初始化组件的 state ，我们可以先赋予它默认值。
• 之后就可以在组件中通过 this.state 来访问它，既然是 state 那么肯定涉及到数据的改变，因此我们还需额外定义一个负责处理 state 变化的函数，这样的函数中一般都会包含 this.setState 这个方法
• 和之前的 props 一样，初始化 state 之后，如果我们想改变它，是不可以直接对其赋值的，直接修改 state 的值没有任何意义，因为这样的操作脱离了 React 运行的逻辑，不会触发组件的重新渲染。所以需要 this.setState 这个方法，在改变 state 的同时，触发 React 内部的一系列函数，最后在页面上重新渲染出组件

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }
  
  addOne() {
    this.setState((prevState) =>({
      counter: prevState.counter + 1
    }))
  }
  
  render() {
    return (
      <div>
        <p>{ this.state.counter }</p>
        <button
          onClick={() => this.addOne()}>
          Increment
        </button>
      </div>
    )
  }
}