react数据的形式属性，状态

组件的数据挂载方式（属性，状态）

属性(props)（数据不经常改动）

props是正常从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

属性是描述性质、特点的，组件自己不能随意更改。

之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props:

App组件：
外组件传入属性

function App() {

  return (
    <div className="App">
      <List></List>
      <DataComponent name = 'laopeng' flag = { false }></DataComponent>
    </div>
  );
}

DataComponent组件：

import React, { Component,Fragment } from 'react'

class DataComponent extends Component{
    
  // props的内部设置 类属性

    static defaultProps = { // React 16版本以上props才是这么定义
    color: 'red'
    }
    
    /*   
    React 15版本props内部设置形式
    getDefaultPorps () {
      return {  
        color: 'red'
      }
    } 
    */
    
    render(){
        return(
            <Fragment>
            home
            <p> 外部传入属性： { this.props.name } </p>
            <p> 内部设置的属性：{ this.props.color } </p>
          </Fragment>
        )
    }
}

在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props:

//app.js
import React from 'react';
import './App.css';
// import StyleComponent from './style_component'
import DataComponent from './data_component'

function App() {
  return (
    <div className="App">
      {/* <StyleComponent></StyleComponent> */}
      
      <DataComponent abc="hahaha"></DataComponent>
    </div>
  );
}

export default App;

const Item = ( props ) => {
  // console.log( 'item', props ) 函数式组件要通过 props参数来接收外部传入的属性[DataComponent传来的属性]
  return (
    <div>
      你好吗
    </div>
  )
}

class DataComponent extends Component{
  render () {
    return (
      <Fragment>
        <Item name = 'item-name'></Item>
        <Title>
          这里是title
        </Title>
      </Fragment>
    )
  }
}

props.children

要在自定义组件的使用嵌套结构，就需要使用 props.children 。在实际的工作当中，我们几乎每天都需要用这种方式来编写组件。

import React, { Component,Fragment } from 'react'

const Title = ( props ) => {
  return (
    <div>
      { props.children }//显示Title组件里面的内容
    </div>
  )
}

class DataComponent extends Component{

  render () {
    return (
      <Fragment>
        <Title>
          这里是title
        </Title>
      </Fragment>
    )
  }
}

export default DataComponent

使用prop-types检查props

React其实是为了构建大型应用程序而生, 在一个大型应用中，根本不知道别人使用你写的组件的时候会传入什么样的参数，有可能会造成应用程序运行不了，但是不报错。为了解决这个问题，React提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types:

数据验证
yarn add prop-types

import React, { Component,Fragment } from 'react'
import PropTypes from 'prop-types'

class DataComponent extends Component{

  // props的内部设置 类属性

  static defaultProps = { // React 16版本以上props才是这么定义
    color: 'red'
  }

  render () {
    console.log( this ) //实例（ 实例化类之后得到的 ）
    return (
      <Fragment>
        <p> 外部传入属性： { this.props.abc} </p>
        <p> 内部设置的属性：{ this.props.color } </p>
      </Fragment>
    )
  }
}

DataComponent.propTypes = {
  // 属性： 属性的类型
  abc: PropTypes.string,
  color: PropTypes.string
}

export default DataComponent

状态（数据频繁改变）

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)

组件自己的状态只能自己改动

定义state

第一种方式

import React,{Component} from 'react'

class DataComponent extends Component{
    state = {//定义DataComponent组件的状态
        girlChara:'萝莉'，
        boyChara:'开朗'
    }
    render(){
        return(
            <div>
                <p>状态：{this.state.girlChara}</p>
                <p>状态：{this.state.boyChara}</p>
            </div>
        )
    }
}

另一种方式(推荐)

import React,{Component} from 'react'

class DataComponent extends Component{
    constructor(){
        super()
        this.state = {//定义DataComponent组件的状态
        nba: '猛龙',
        girlChara:'萝莉'，
        boyChara:'开朗'
        }
    }
    
    render(){
        return(
            <div>
                <p>状态：{this.state.girlChara}</p>
                <p>状态：{this.state.boyChara}</p>
                <p>状态：{this.state.nba}</p>
            </div>
        )
    }
}

this.props和this.state是纯js对象,在vue中，data属性是利用Object.defineProperty处理过的，更改​data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setState。

setState(更改状态)

通过点击事件修改状态

import React, { Component} from 'react'

class DataComponent extends Component{
    
    // state = {
    //     girlChara:'萝莉',
    //     boyChara:'开朗'
    // }
    constructor(){
        super()
        this.state = {
            girlChara:'萝莉',
            boyChara:'开朗' ,
            nba:'猛龙'           
        }
    }
    change () {
        console.log(this)//undefined这里的this改变了通过bind来重新指向实例
        this.setState({
            nba:'勇士'            
        })
    }
    
    change = () =>{//箭头函数绑定this
        this.setState({
            nba:'勇士'            
        })    
    }
    render () {
        return(
            <div>
                 {/* <button onClick = { this.change.bind(this) }> 改变状态 </button> */}//把this重新指向实例
                <button onClick={this.change}>改变状态</button>
                <p>{this.state.girlChara}</p>
                <p>{this.state.boyChara}</p>
                <p>{this.state.nba}</p>
            </div>           
        )
    }
}

setState有两个参数

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

• 参数是对象

  change () {
        console.log(this)//undefined这里的this改变了通过bind来重新指向实例
        this.setState({
            nba:'勇士'            
        })
    }
  

• 参数是方法

    change(){
        this.state( (prevstate,props) =>{
            console.log(prevstate)//{girlChara: "萝莉", boyChara: "开朗", nba: "猛龙"}先前的状态
            console.log(props)//{abc: "hahaha"}获取组件的属性
            return {
                nba:'勇士'
            }
        })
    }
  

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

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

change(){
    this.state( (prevstate,props) =>{
        console.log(prevstate)//{girlChara: "萝莉", boyChara: "开朗", nba: "猛龙"}先前的状态
        console.log(props)//{abc: "hahaha"}获取组件的属性
        return {
            nba:'勇士'
        }
    },()=>{//这是一个回调函数
        console.log('回调内层')
    })
    console.log('回调外层')
}

属性vs状态

相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

不同点：

1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

如果搞不清 state 和 props 的使用场景，记住一个简单的规则：尽量少地用 state，多用 props。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。