React 组件协同关系
组件协同的两种方法，1种是纵向的协同，就是组件嵌套，重点在于代码的封装，2种是横向协同也就是Mixin，组件抽离，重点在于代码复用
1、组件嵌套，父组件通过属性向子组件，子组件可以通过事件处理函数以委托的方式想父组件发送数据
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'> 5 <title>daomul's example</title> 6 <link rel="stylesheet" href="../shared/css/base.css" /> 7 </head> 8 <body> 9 <h1>Text demo</h1> 10 <div id="container"> 11 12 </div> 13 14 <script src="../shared/thirdparty/es5-shim.min.js"></script> 15 <script src="../shared/thirdparty/es5-sham.min.js"></script> 16 <script src="../shared/thirdparty/console-polyfill.js"></script> 17 <script src="../../build/react.js"></script> 18 <script src="../../build/JSXTransformer.js"></script> 19 <script type="text/jsx"> 20 21 //选择组件 22 var GenderSelect = React.createClass({ 23 24 render:function(){ 25 console.log("render,4"); 26 return <select onChange = {this.props.handleSelect}> 27 <option value = "0">男</option> 28 <option value = "1">女</option> 29 </select>; 30 }, 31 }); 32 33 //表单组件 34 var SignupForm = React.createClass({ 35 getInitialState:function(){ 36 return { 37 name :'', 38 password:'', 39 gender:0, 40 }; 41 }, 42 handleChange:function(name,event){ 43 var newState = {}; 44 newState[name] = event.target.value; 45 this.setState(newState); 46 }, 47 handleSelect:function(event){ 48 this.setState({gender:event.target.value}); 49 }, 50 render:function(){ 51 console.log(this.state); 52 return <form> 53 <input type = "text" placeholder = "请输入用户名" onChange = {this.handleChange.bind(this,'name')} ></input> 54 <input type = "text" placeholder = "请输入密码" onChange = {this.handleChange.bind(this,'password')} ></input> 55 <GenderSelect type="text" handleSelect = {this.handleSelect}></GenderSelect> 56 </form>; 57 }, 58 }); 59 60 React.render(<SignupForm></SignupForm> ,document.body); 61 62 </script> 63 </body> 64 </html>
2、Mixin就是 横向抽离相似的代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'> 5 <title>daomul's example</title> 6 <link rel="stylesheet" href="../shared/css/base.css" /> 7 </head> 8 <body> 9 <h1>Text demo</h1> 10 <div id="container"> 11 12 </div> 13 14 <script src="../shared/thirdparty/es5-shim.min.js"></script> 15 <script src="../shared/thirdparty/es5-sham.min.js"></script> 16 <script src="../shared/thirdparty/console-polyfill.js"></script> 17 <script src="../../build/react.js"></script> 18 <script src="../../build/JSXTransformer.js"></script> 19 <script type="text/jsx"> 20 21 //Mixin 22 var BindMixin = { 23 handleChange:function(key){ 24 //先将this保存起来是因为在js中，方法内部再调用函数的话会使得this的丢失 25 var self = this 26 //这个变量如果放在function内部的话会加大构建的内存损耗 27 var newState = {} 28 return function(event){ 29 //这里不能直接使用self.setState({key:event.targe.value}) 30 //因为key是作为'key'字符串的存在传入的 31 newState[key] = event.target.value 32 self.setState(newState) 33 } 34 } 35 } 36 var TextClass = React.createClass({ 37 38 //这里就是作为对Mixin的使用 39 mixins : [BindMixin], 40 getInitialState:function(){ 41 return { 42 name :'', 43 password:'', 44 }; 45 }, 46 render:function(){ 47 return <div> 48 <input type = "text" placeholder = "请输入用户名" onChange = {this.handleChange('name')} ></input> 49 <input type = "text" placeholder = "请输入密码" onChange = {this.handleChange('password')} ></input> 50 <p>{this.state.name}</p> 51 <p>{this.state.password}</p> 52 </div>; 53 }, 54 }); 55 56 React.render(<TextClass></TextClass> ,document.body); 57 58 </script> 59 </body> 60 </html>
