一、表单处理

1、受控组件-input元素

通过设置input元素的value值（或复选框的checked值）实现Getter，通过监听onChange事件实现Setter，从而实现数据双向绑定。

class element extends React.Component {state = {txt:"",checked:false}handleTxt = (e) => {this.setState({txt : e.target.value})}handleChecked = e => {this.setState({checked : e.target.checked})}render(){return ()}
}

多表单的优化操作：

1）给input元素加name,name=state中对应的数据名、2）统一用一个处理函数处理数据变化，函数内用e.target.name获取应该修改的状态名

class element extends React.Component {state = {txt:"",checked:false}handleForm = (e) => {let name = e.target.namelet value = e.target.value||e.target.checkedthis.setState({[name] : value}) //!!这里要用[],否则会当作"name"字符串处理}render(){return ()}
}

2、非受控组件

二、组件通信

1、props:一个对象

import React from 'react'
import ReactDom from 'react-dom'//函数式：porps形参
function Element1 (props){return ({props.name}+{props.age})
}//类式：this.props
class Element2 extends React.Component{render(){return ({this.props.name}+{this.props.age})}
}ReactDom.render()
ReactDom.render()

注：1)props可以传递任意数据类型，包括数组、对象、函数、dom结构等。2）props只读。3）在类中如果定义了constructor(props)则必须将props传入做形参，且需要在super(props)函数也传入props形参

组件间通信方式：

1）父传子：props传数据,如上

2）子传父：props传函数，通过回调函数传参方式

3）兄弟组件通信：状态提升，将共享状态的定义提升到公共父组件

2、context 跨级组件通信，祖先元素将数据传递给后代元素时使用

假设祖先 > subComponent > 后代

1）创建两个内置组件Provider、Comsumer

const {Provider,Consumer} = React.createContext()

2)祖先元素中用Provider包裹返回值

//祖先
render(){return ()
}

3)后代元素用Consumer {}包裹

render(){return({ data => 名字是：{data}
 })
}

三、props深入

1、props的children属性

当渲染组件时，组件中嵌套的内容视为children属性，可以通过props.children访问到。

嵌套的内容可以是文本、标签、组件、jsx语句、函数等

const App = (props)=>{props.children() //函数执行return ({props.children})
}// ReactDom.render(这是一段文本)
// ReactDom.render(这是一个p标签)
// ReactDom.render(这是一个子组件)
// ReactDom.render({()=>console.log("这是一个函数")})

2、props校验，需要安装 prop-types包