我平時工作中用的最多的應該算是各個元素之間通信，比如點擊一個按鈕，另一個按鈕打開或者灰掉，全選，動態顯示錶格等等。在React裏面就是組件之間的通信。
（爲什麼說是基礎呢？很簡單，redux還沒弄懂~用來解決多層嵌套的組件之間避免一層層來通信）
主要是分爲三類：
1.子組件向父組件通信
下面這個例子的效果是，在文本框中輸入郵箱，會在一個div中同時顯示出來；
這個文本框就是子組件，div就是父組件；
這裏還記得props麼？ --------組件裏面定義的屬性，我們可以通過this.props.xxx來使用這個屬性或者方法；
首先在父組件中定義一個處理函數來處理狀態的變化，然後子組件也同時引用這個函數，子組件在使用的時候父組件可以通過這個函數獲取相應的值，並用來自己使用；
概況起來說：react中state改變了，組件纔會update。父寫好state和處理該state的函數，同時將函數名通過props屬性值的形式傳入子，子調用父的函數，同時引起state變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-hello-world</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
class Child extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
請輸入郵箱：<input onChange={this.props.handleEmail}/>
</div>
)
}
}
//父組件，此處通過event.target.value獲取子組件的值
class Parent extends React.Component{
constructor(props){
super(props);
this.state={
email: ''
}
}
handleEmail(event){
this.setState({
email: event.target.value
});
}
render(){
return (
<div>
<div>用戶郵箱：{this.state.email}</div>
<Child name="email" handleEmail={(e)=>{this.handleEmail(e)}}/>
</div>
)
}
}
ReactDOM.render(
<Parent />,
document.getElementById('app')
);
</script>
</body>
</html>2.父組件向子組件通信
下面這個例子的效果就是勾選一個chekbox後，下面div中會提示是true or false；
checkbox就是父組件，div是子組件；
其實也是利用了props這個屬性來實現的，這次是把checkbox的屬性定義在子組件的屬性中，然後子組件通過this.props.xxx來獲取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-hello-world</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
class Child extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
是否選中：<span>{this.props.isSelect?"true":"false"}</span>
</div>
)
}
}
class Parent extends React.Component{
constructor(props){
super(props);
this.state={
isSelect:true
}
}
handleChange(){
this.setState(prevState => {return {
isSelect: !prevState.isSelect
}});
}
render(){
return (
<div>
<input type="checkbox" checked={this.state.isSelect} onChange={()=>this.handleChange()}/>
<Child isSelect={this.state.isSelect}/>
</div>
)
}
}
ReactDOM.render(
<Parent />,
document.getElementById('app')
);
</script>
</body>
</html>3沒有任何嵌套關係的組件之間傳值（PS：比如：兄弟組件之間傳值）
下面這個例子就是用一個按鈕去清除文本框的內容；
文本框和按鈕都是父組件中的子組件；
子組件不能直接跟子組件通信，需要用父組件做一箇中介，來實現通信；
首先是文本框組件通過this.props.handleChange這個函數來和父組件建立聯繫，把文本框輸入的值通過this.handleChange 的
e.target.value傳遞給父組件，父組件再通過this.state.text這個屬性，傳遞給文本框組件，使得文本框能夠顯示輸入的內容；然後按
鈕組件通過this.props.handleClick這個函數和父組件this.handleClick建立聯繫，通過這個函數來改變this.state.text的值，從而改
變文本框的內容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-hello-world</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
class Child extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<input type="text" value={this.props.text} onChange={(e)=>{this.props.handleChange(e)}}/>
</div>
)
}
}
class Child2 extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<button onClick={()=>{this.props.handleClick()}}>清除</button>
</div>
)
}
}
class Parent extends React.Component{
constructor(props){
super(props);
this.state={
text:"",
}
}
handleClick(){
this.setState({
text:""
});
}
handleChange(e){
this.setState({
text:e.target.value
})
}
render(){
return (
<div>
<Child text={this.state.text} handleChange={(e)=>{this.handleChange(e)}}/>
<br/>
<Child2 handleClick={()=>{this.handleClick()}}/>
</div>
)
}
}
ReactDOM.render(
<Parent />,
document.getElementById('app')
);
</script>
</body>
</html>說實話，上面這些功能如果用jq的話其實就幾句話是事情-。- 可能是目前還沒涉及到複雜的組件，所以看不出react的優點
