React中的组件
1函数组件
创建函数组件
function Hello()
{
return <h1>Hello world!</h1>;
}
函数组件为无状态组件
类组件
class Welcome extends React.Component{
render(){
return <h1>hello world!</h1>
}
}
类组件是有状态组件
React State状态
react中更改state中的值只能通过this.setstate()来进行更改
React中的props
在函数组件中使用props
function Hello(props){
return <h1>hello {props.name}</h1>
}
const element = <Hello name="zhangsan">
ReactDom.render(element,document.getElementById('app'))
name属性通过props.name来获取
react中的组件间的传值
父组件
class Parent extends React.Component{
render(){
return (<div>
<Child name={zhangsan}/>
</div>)
}
}
子组件
class Child extends React.Component{
render(){
return (
<div>
<p>{this.props.name}</p>
</div>
)
}
}
子组件向父组件传值
父组件
class Parent extends React.Component{
getChildMsg = (msg) =>{
console.log('接受数据',msg)
}
render(){
return(
<div>
<Child getMsg={this.getChileMsg}/>
</div>
)
}
}
子组件
class Child extends React.Component{
state = {childMsg:'React'}
handleClick = () =>{
this.props.getMsg(this.state.childMsg)
}
return(
<button onClick={this.handleClick}>点我给父组件传值</button>
)
}
兄弟组件间的传值
将共享装填的数据提升到最近的公共父组件中,由父组件向子组件传值
这个称为状态提升
公共父组件职责:1. 提供共享状态 2.提供操作共享状态的方法
要通讯的子组件只需要通过props接收状态或操作状态的方法
context
如果出现层级较多,使用context
此方法为跨组件传递数据
const {Provider,Consumer} = React.createContext()
//使用Provider为父节点
<Provider>
<div className='App>
<Child/>
</div>
</Provider>
//设置value属性
<Provider value="zhangsan">
//哪一层需要接受数据将使用Consumer进行包裹
<Consumer>
{data => <span>data表示接收到的参数 {data}</span>}
</Consumer>
props的校验
- 对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据,简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
- 如果传入的数据不对,可能会导致报错
- 关键问题:组件的使用者不知道需要传递什么样的数据
- props校验:允许在创建组件的时候,指定props的类型、格式等
App.propTypes ={
colors:PropTypes.array
}
- 作用:捕获使用组件时因为props导致的错误,给出明确的错误提示,增加组件的健壮性
常见的约束规则
- 创捷的类型 :array、bool、function、number、object、string
- React元素类型 :element
- 必填项:isRequired