props
props是内部传入的，组件外部也能够进行一些初始化的设置，属性不能在组件外部进行批改，然而能够通过父组件被动从新渲染的形式来传入新的props。
通过props进行传值：
// 子组件是类组件import React, { Component,Fragment } from 'reactexport 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
类组件
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
下面的属性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
第一种形式
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> ) }}
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的更新，都具备确定性
不同点：
- 属性能从父组件获取，状态不能够
- 属性能够由父组件批改，状态不能够
- 属性能在外部设置默认值，状态也能够
- 属性不能在组件外部批改，状态能够
- 属性能设置子组件初始值，状态不能够
- 属性能够批改子组件的值，状态不能够
下面的不同点其实就是车轱辘话，总结一下就是状态只能是组件本人改，然而属性是能够通过父组件管制的。
state的次要作用是用于组件保留、管制、批改本人的可变状态。state在组件外部初始化，能够被组件本身批改，而内部不能拜访也不能批改。你能够认为state是一个部分的、只能被组件本身管制的数据源。state中状态能够通过this.setState办法进行更新，setState会导致组件的从新渲染。
props的次要作用是让应用该组件的父组件能够传入参数来配置该组件。它是内部传进来的配置参数，组件外部无法控制也无奈批改。除非内部组件被动传入新的props，否则组件的props永远放弃不变。