React 将数据分的更为详细了，分类如下：

• state 【 状态 】
• props 【 属性 】

props使用来描述组件的性质和特征的，组件不能自己随意去更改 props的定义有两种，分别如下：

• 由外部传入
• 由内部设置

1. 由外部传入

    /* 父组件 */
    import React,{ Component } from 'react'
    class Father extends Component{
        render () {
            return (
                <div>
                    <Son name = "西阁"/>
                </div>
            )
        }
    }
    /* 子组件 */
    class Son extends Component{
        render () {
            return (
                <div>
                    {/* 子组件通过this.props 来接收绑定在它身上的属性 */}
                    { this.props.name }
                </div>
            )
        }
    }

    import React from 'react'
    /* 父组件 - 通过属性绑定的形式传递数据给子组件 */
    const Father = props => {//函数组件可以接收一个props作为参数
        const age = 19
        return (
            <div>
                <Son age = { age }/>
            </div>
        )
    }
    {/* 子组件 */}
    const Son = props => {
        return (
            <div>
                {/* 函数组件 - 通过props参数接收 */}
                { props.age }
            </div>
        )
    }

2. 由内部设置

    import React from 'react'
    class Hello extends React.Component{
        static defaultProps = {
            character: '高冷'
        }
        render () {
            return (
                <div>
                    {/* 通过this.props来接收属性 */}
                    { this.props.character }
                </div>
            )
        }
    }

3. props验证

• 当我们接收由外部传入的props时，为了保证我们使用数据的数据类型能过符合我们的要求，那我们需要对接收的数据类型做验证
• props属性验证的方法如下：
  • 使用第三方模块 - prop-types

1. 安装

   $ yarn add prop-types

2. 使用

    import React from 'react'
    import PropTypes from 'prop-types'
    class Father extends React.Component{
        render () {
            return (
                <div>
                    <Son name = "西阁"/>
                </div>
            )
        }
    }
    class Son extends React.Component{
        render () {
            return (
                <div>
                    { this.props.name }
                </div>
            )
        }
    }
    Son.propTypes = {
        // 验证属性: 验证属性的数据类型
        name: PropTypes.string
    }

• state - 状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同
• state的定义形式有两种，分别如下：
  • 直接在类内定义
  • 在类的构造器函数之中定义

1. 在类内直接定义

    import React from 'react'
    class WestCount extends React.Component{
        {/* 类内直接定义 */}
        state = {
            count: 0
        }
        render () {
            // 我们先解构，在使用
            const { count } = this.state 
            return (
                <div>
                    { count + 1 }
                </div>
            )
        }
    }
   

2. 在类的构造函数中定义

    import React from 'react'
    class WestCount extends React.Component{
        {/* 在constructor中定义 */}
        constructor ( props ) {
            /* props是指从父组件中传递过来的属性 */
            super( props ) // super的作用：  this.props = props
            this.state = {
                count: 0 
            }
        }
        render () {
            // 我们先解构，在使用
            const { count } = this.state 
            return (
                <div>
                    { count + 1 }
                </div>
            )
        }
    }
   

3. 状态的修改 - setState

    import React, { Component } from 'react'
    import ReactDOM from 'react-dom'

    class App extends Component {
      constructor() {
        super()
        this.state = {
          name: 'React',
          isLiked: false
        }
      }
      handleBtnClick = () => {
        this.setState({
          isLiked: !this.state.isLiked
        })
      }
      render () {
        return (
          <div>
            <h1>欢迎来到{this.state.name}的世界</h1>
            <button onClick={this.handleBtnClick}>
              {
                this.state.isLiked ? '❤️取消' : '🖤收藏'
              }
            </button>
          </div>
          )
      }
    }
    ReactDOM.render(
        <App/>,
      document.getElementById('root')
    )

第一个参数可以是对象，也可以是方法 【return一个对象】，我们把这个参数叫做updater

• 参数是对象

  this.setState({
    isLiked: !this.state.isLiked
  })
  

• 参数是方法

  this.setState((prevState, props) => {
    return {
      isLiked: !prevState.isLiked
    }
  })
  

  注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props

setState是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数

this.setState((prevState, props) => {
  return {
    isLiked: !prevState.isLiked
  }
}, () => {
  console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)