关于react.js:5-组件的数据挂载方式

props

props是内部传入的，组件外部也能够进行一些初始化的设置，属性不能在组件外部进行批改，然而能够通过父组件被动从新渲染的形式来传入新的props。
通过props进行传值：

// 子组件是类组件
import React, { Component,Fragment } from 'react
export default class Child extends Component {
    render() {
        return (
            <>
                <h2>{this.props.title}</h2>
            </>
        )
    }
}

// 子组件是函数式组件
export default function Child(props){
    return (
        <h1>
            {props.title}
        </h1>
    )
}

// 父组件
import React,{Component} from 'react'
// 引入子组件
import Child from './Child'

export default class Parent extends Component {
    render(){
        return (
            <>
                <Child title="lilan"></Child>
            </>
        )
    }
}

当没有传参或者获取的时候没有该属性的时候，获取后果是undefined

设置组件的默认props

1. 类组件

   class Child extends Component {
     // 应用类创立的组件，间接在这里写static办法，创立defaultProps
     static defaultProps = {
       name: 'React'
     }
     render () {
       return (
           <h1>欢送进入{this.props.name}的世界</h1>
       )
     }
   }

2. 函数式组件

   const Child = (props) => {
     return (
       <p>{props.name}是一个构建UI的库</p>
     )
   }
   
   // 应用箭头函数创立的组件，须要在这个组件上间接写defaultProps属性
   Child.defaultProps = {
     name: 'React.js'
   }

props.children

下面的属性props的值是一个对象，对象中蕴含一个children属性，children属性的值是一个数组，数组中蕴含应用该组件时蕴含在该组件内的元素。

// 子组件
export default class Child extends Component {
    render() {
        return (
            <h1>欢送进入{this.props.children}的世界</h1>
            
        )
    }
    // 这个先不必管，只有晓得在这个函数内能够也获取到props即可
    componentDidMount(){
        console.log(this.props)
        console.log(this.props.chidren)
    }
}

// 父组件
export default class Parent extends Component {
    render() {
        return (
            <Fragment>
                <Child title="todo">
                    <i>React</i>
                    <p>lilan</p>
                </Child>
            </Fragment>
        )
    }  
}

打印后果

children数组中的每一个元素都是蕴含在组件内的节点

应用prop-type查看props

React其实是为了构建大型应用程序而生, 在一个大型利用中，基本不晓得他人应用你写的组件的时候会传入什么样的参数，有可能会造成利用程序运行不了，然而不报错。为了解决这个问题，React提供了一种机制，让写组件的人能够给组件的props设定参数查看，须要装置和应用prop-types

npm i prop-types -S

状态 state

状态就是组件形容某种显示状况的数据，由组件本人设置和更改，也就是说由组件本人保护，应用状态的目标就是为了在不同状态下使组件的显示不一样。个别状况下，函数式组件是无状态组件，状态只有类组件才有。

定义state

1. 第一种形式

   import React, { Component } from 'react'
   
   export default class State extends Component {
     state = {
       name: 'React',
     }
     render () {
       return (
         <div>
           <h1>欢送来到{this.state.name}的世界</h1>
         </div>
       )
     }
   }

2. 第二种形式（举荐）

   export default class State extends Component {
       constructor(){
           super()
           this.state = {
               name:'React'
           }
       }
       render() {
           return (
               <div>
                   <h1>欢送来到{this.state.name}的世界</h1>
               </div>
           )
       }
   }

setState

this.props和this.state是纯js对象，在VUE中，data属性是利用Object.defineProperty解决过的，更改data的数据的时候会触发数据的getter和setter，然而React中并没有做这样的解决，如果间接更改的话，React是无奈得悉的，所以须要应用非凡的更改状态的办法：setState。

下面的demo中，name寄存在梳理的state对象当中，组件的render函数内，会根据state中的数据进行显示。上面给h1增加事件监听。

import React, { Component } from 'react'
export default class State extends Component {
    constructor(){
        super()
        this.state = {
            name:'React'
        }
    }

    handleClick = () => {
        this.setState({
            name:"VUE"
        })
    }
    render() {
        return (
            <div>
                <h1 onClick={this.handleClick}>欢送来到{this.state.name}的世界</h1>
            </div>
        )
    }
}

setState有两个参数
第一个参数能够是对象，也能够是办法return一个对象，咱们把这个参数叫做updater。

• 参数是对象

this.setState({
    name:"VUE"
})

• 参数是办法

this.setState((prevState, props) => {
    return {
        name: "VUE"
    }
})

留神的是这个办法接管两个参数，第一个是上一次的state，第二个就是props，setState是异步的，所以想要获取到最新的state，是没有方法获取的，就有了第二个参数，这是一个可选的回调函数

this.setState((prevState, props) => {
    return {
        name: "VUE"
    }
}, () => {
    console.log("回调外面的state中的name：",this.state.name)
})
console.log("内部的state中的name：",this.state.name)

属性 VS 状态

• 相同点：都是纯JS对象，都会触发render的更新，都具备确定性

• 不同点：

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

下面的不同点其实就是车轱辘话，总结一下就是状态只能是组件本人改，然而属性是能够通过父组件管制的。

state的次要作用是用于组件保留、管制、批改本人的可变状态。state在组件外部初始化，能够被组件本身批改，而内部不能拜访也不能批改。你能够认为state是一个部分的、只能被组件本身管制的数据源。state中状态能够通过this.setState办法进行更新，setState会导致组件的从新渲染。

props的次要作用是让应用该组件的父组件能够传入参数来配置该组件。它是内部传进来的配置参数，组件外部无法控制也无奈批改。除非内部组件被动传入新的props，否则组件的props永远放弃不变。