一、复习
-
约束组件(表单对于input(tyoe=text)等等用value,单选框和多选框设置checked)
组件内部的信息状态交由组件管理，由state状态来管理；
value或checked来设置默认状态值，获取组件的值也就是状态。
onChange方法来更改组件内部的状态； -
非约束组件（表单）
组件（元素）的内部信息交由元素自身管理；
defaultValue或defaultChecked来设置默认值，获取值通过ref设置来获取；
ref是非元素属性，获取虚拟dom的快捷方式；ref="name"
this.refs.name来获取，对象就是虚拟dom； -
非元素属
- key 当循环创建列表元素的时候，会使用该属性来标识；
- ref 获取元素的快捷方式，获取通过this.refs来获取；
- dangerouslySetInnerHTML 设置元素内容的值，接收一个对象，对象有一个属性__html,用来设置元素的内容，插入的值是任意字符串，比如html标签，可以掺入行内式的样式等；
- 父组件向子组件信息传递
通过父组件对子组件添加属性来实现的，子组件通过this.props来获取父组件的消息；
第一种情况：添加的属性是一个固定值（字符串），父组件每次更新的时候，子组件的属性不会变化；
第二种情况：添加的属性是一个父组件中的变量，父组件每次更新的时候，如果该变量更新了，子组件也会更新；
第三种情况：添加属性是父组件中的状态，父组件每次更新,该方法不会更新，但是子组件内部发生交互的时候，可能会调用该父组件传递的方法，在该方法中如果改变了父组件的状态，（子组件向父组件传递信息）；
第四种情况：添加的属性是父组件中的属性，此时父组件属性更新了，子组件会更新；
第五种情况：添加的属性是父组件中的状态，此时父组件状态更新了，子组件会更新；
- 获取组件中的元素
ReactDOM.findDOMNode(this) 获取的是整个组件
ReactDOM.findDOMNode(this.refs.name) 获取的ref元素
========================================================================
二、兄弟组件之间的信息传递(双向绑定)
每个子组件都有自己的完整空间，彼此没有联系，因此他们之间最大的难题就是信息的传递；
我们知道父组件可以和子组件通信，通过设置子组件的属性；
父组件除了可以向子组件传递固定值，属性值，状态值，还可以传递函数；
父组件的方法如果绑定在了子组件的元素事件上，那么在该方法中，事件对象的target是组件绑定事件的元素，e.target.value就是要获取的子组件的值;而this则是父组件自己，通过this.setState来讲子组件的值传递给另一个子组件；
该方法需要通过共同的父组件实现；
如果一个兄弟组件向另一个兄弟组件传递信息，流程是由该兄弟组件向父组件传递信息，再由该父组件代理向另一个子组件传递；可以学习Project的代码；
var InputMsg = React.createClass({
render:function(){
// console.log(this.props.changeMsg)如果把父组件传递的这个函数绑定到子组件的onChange事件上会发生什么呢？
return (
<div>
<input type="text" onChange={this.props.changeMsg}/>
</div>
)
}
})
var ShowMsg = React.createClass({
render:function(){
return (
<div>
<ul>
<p>{this.props.msg}</p>
</ul>
</div>
)
}
})
var Main = React.createClass({
getInitialState:function(){
return {
msg:'world'
}
},
changeMsg:function(e){
//事件对象是子组件中的Input,而this指向的是父组件自己；
// console.log(111,e,222,this)
// console.log(e.target.value)//该值就是子组件InputMsg的值，也是要传递给ShowMsg的值
var value = e.target.value;
this.setState({
msg:value
})
},
render:function(){
return (
<div className="main">
<InputMsg changeMsg={this.changeMsg}/>
<ShowMsg msg={this.state.msg}/>
</div>
)
}
})
ReactDOM.render(<Main />,document.getElementById('app'))
=======================================================================
混合
react支持混合，将混合中的方法复制到组件对象中，这样组件对象就可以使用该方法了；
在组件外部定义个对象
var MethodMixin = {//混合方法，把公用的部分提取出来
getData:function(url,callback){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
//
if (xhr.readyState == 4){
if(xhr.status == 200){
var obj = JSON.parse(xhr.responseText)
callback(obj)
} else{
console.log('请求失败')
}
}
}
xhr.open("GET",url,true);
xhr.send(null);
}
}
组件内部调用，注意:这是一个数组，我们们可以通过混合复制多个对象上的属性方法，因此混合可以看作是一种多继承；es6中实现了继承，就不要用这个方法了；
mixins: [MethodMixin],//调用混合
使用混合当中的方法
componentDidMount:function(){
var me = this;
this.getData('data/start.json',function(res){//通过混合就能this.调用混合对象的getData方法
// console.log(res)
me.setState({
article:res,
aside:me.asideAdaptor(res)
})
})
}
========================================================================================================
组件提炼
通常一个组件做一件事，方便复用；
网友评论