1.props属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="react.development.js"> </script>
<script src="react-dom.development.js"></script>
<script src="babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class SayName extends React.Component{
render(){
return(<h1> Hello {this.props.name}</h1>)
};
}
ReactDOM.render(<SayName name="天佑"/>, document.getElementById('root'));
</script>
</body>
</html>
props是properties的简称，范围为属性，在React中的组件都是相对独立的，一个组件可以定义接受外界的props，在某种意义上就可以理解为组件定义了一个对外的接口，组件自身相当于一个函数，props可以作为一个参数传入，旨在将任意类型的数据传给组件
在上面的例子中，先定义一个名为sayName的组件，在render中返回一个h1的DOM节点，用this.props.name来获取组建的属性。当然，props也可以在挂载组件的时候为其提供初始值，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="react.development.js"> </script>
<script src="react-dom.development.js"></script>
<script src="babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class SayName extends React.Component{
static defaultProps = {
name: 'LuoTianyou';
}
render(){
return(<h1> Hello {this.props.name}</h1>)
};
}
ReactDOM.render(<SayName />, document.getElementById('root'));
</script>
</body>
</html>
2.state状态值
state为状态之意，组件在react中可以理解为一个状态机，组件的状态是用state来记录的，state在组件内部，并可以修改。
下面是一个利用state来修改DOM元素颜色的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="react.development.js"> </script>
<script src="react-dom.development.js"></script>
<script src="babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class ChangeColor extends React.Component{
constructor(props){
super(props);
this.state = {isRed:true};
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState((prevState, props)=>({
isRed: !prevState.isRed,
}));
}
render() {
var redStyle = {
color: "red"
}
var blueStyle = {
color: "blue"
}
return(
<div>
<h1 style={this.state.isRed ? redStyle : blueStyle}>天佑</h1>
<button onClick={this.handleClick}>点击改变颜色</button>
</div>
)
}
}
ReactDOM.render(<ChangeColor/>, document.getElementById("root"));
</script>
</body>
</html>
在上面的例子中，state的初始化是在constructor构造函数中实现的，isRed就是一个组件的state，初始化为true，在render方法中，设定如果isRed值为true，则渲染的h1的style为redStyle，在button中绑定handleClick方法，调用setState方法来改变isRed的值。
setState方法有两个参数，官方给出的说明如下:
void setState(
function | object nextState,
[function callback]
)
其中，这个回调函数是渲染完以后再执行，我们现在在渲染前获取prevState信息，不需要传入两个参数。我们只需要通过setState获取到之前的状态prevState，再修改它的值为!isRed就可以了。
3.兄弟节点之间的通信
brother1可以调用父节点的接口来与brother2通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="babel.js"></script>
<script>
</script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Brother1 extends React.Component{
constructor(props) {
super(props);
this.state = {};
}
render(){
return(
<div>
<button onClick={this.props.refresh}>更新兄弟</button>
</div>
)
}
}
class Brother2 extends React.Component{
constructor(props){
super(props);
this.state = {};
}
render(){
return(
<div>
{this.props.text || "兄弟节点通信前"}
</div>
)
}
}
class Father extends React.Component{
constructor(props) {
super(props);
this.state = {};
}
refresh(){
return (e)=>{this.setState({text:"兄弟节点通信成功"})}
}
render(){
return(
<div>
<Brother1 refresh={this.refresh()}/>
<Brother2 text={this.state.text}/>
</div>
)
}
}
ReactDOM.render(<Father/>, document.getElementById("root"));
</script>
</script>
</body>
</html>
4.子节点与父节点的通信
通过在父节点中给子节点设置一个回调函数来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
<script>
</script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Child extends React.Component{
constructor(props){
super(props);
this.state = {};
}
render(){
return (
<div>
<button onClick={this.props.refreshParent}>
更新父组件
</button>
</div>
)
}
}
class Father extends React.Component{
constructor(props){
super(props);
this.state = {};
}
refreshParent(){
this.setState({
parentText:"子组件更新父组件成功",
})
}
render(){
return(
<div>
<Child refreshParent={this.refreshParent.bind(this)}/>
{this.state.parentText || "父组件更新前"}
<Child refreshParent={this.refreshParent.bind(this)}/>
</div>
)
}
}
ReactDOM.render(<Father/>,document.getElementById("root"));
</script>
</script>
</body>
</html>
