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

2次阅读

共计 3221 个字符，预计需要花费 9 分钟才能阅读完成。

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

类组件

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

函数式组件

const Child = (props) => {
  return (<p>{props.name}是一个构建 UI 的库 </p>
  )
}

// 应用箭头函数创立的组件，须要在这个组件上间接写 defaultProps 属性
Child.defaultProps = {name: 'React.js'}

下面的属性 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 数组中的每一个元素都是蕴含在组件内的节点

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

npm i prop-types -S

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

第一种形式

import React, {Component} from 'react'

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

第二种形式（举荐）

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

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)

相同点：都是纯 JS 对象，都会触发 render 的更新，都具备确定性
不同点：
1. 属性能从父组件获取，状态不能够
2. 属性能够由父组件批改，状态不能够
3. 属性能在外部设置默认值，状态也能够
4. 属性不能在组件外部批改，状态能够
5. 属性能设置子组件初始值，状态不能够
6. 属性能够批改子组件的值，状态不能够

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

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

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

正文完