乐趣区

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

jiezi

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 永远放弃不变。

退出移动版