React組件協同使用


組件協同的本質是對組件的一種組織、管理方式。

1.組件嵌套

2.Mixin(混入,把一段代碼混到組件中)


一、組件嵌套

本質是父子關系。

父組件 —(屬性)—子組件

子組件—(事件處理函數(委托))—父組件

優點:

邏輯清晰:父子關系

代碼模塊化:同步開發

封裝細節

缺點:

編寫難度高:處理父子關系

無法掌握細節


實例代碼如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>父子關系</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
var GenderSelect = React.createClass({
render: function() {
return <select onChange={this.props.handleSelect}>
<option value="0"></option>
<option value="1"></option>
</select>
}
})
var SignupForm = React.createClass({
getInitialState: function() {
return {
name: '',
password: '',
gender: '',
}
},
handleChange: function(name, event) {
var newState = {}
newState[name] = event.target.value
this.setState(newState)
},
handleSelect: function(event) {
this.setState({gender: event.target.value})
},
render: function() {
console.log(this.state)
return <form>
<input type="text" placeholder="請輸入用戶名" onChange={this.handleChange.bind(this, 'name')} />
<input type="password" placeholder="請輸入密碼" onChange={this.handleChange.bind(this, 'password')} />
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
}
})
React.render(<SignupForm></SignupForm>, document.body);
</script>
</body>
</html>

二、Mixin編寫和使用

Mixin=一組方法

Mixin的目的是橫向抽離出組件的相似代碼

相似概念:面向切面編程、插件

優點:

代碼復用

即插即用

適應性強

缺點:

編寫難度高

降低代碼可讀性

代碼如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Mixin</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
/*var BindingExample = React.createClass({
getInitialState:function () {
return {
text:''
}
},
handleChange:function (event) {
this.setState({text:event.target.value});
},
render:function () {
return <div>
<input type="text" placeholder="請輸入內容" onChange={this.handleChange}/>
<p>{this.state.text}</p>
</div>
}
});*/
var BindingMixin = {
handleChange:function (key) {
var that = this;
return function () {
var newState = {};
newState[key] = event.target.value;
that.setState(newState);
}
},
};
var BindingExample = React.createClass({
mixins:[BindingMixin],
getInitialState:function () {
return {
text:'',
comment:''
}
},
render:function () {
return <div>
<input type="text" placeholder="請輸入內容" onChange={this.handleChange('text')}/>
<textarea onChange={this.handleChange('comment')}></textarea>
<p>{this.state.text}</p>
<p>{this.state.comment}</p>
</div>
}
});
React.render(
<BindingExample></BindingExample>,document.body
);
</script>
</body>
</html>




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com