react中的组件问题

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