-
55555
查看全部 -
444444
查看全部 -
444444
查看全部 -
44444
查看全部 -
11111111111
查看全部 -
11122222
查看全部 -
22222
查看全部 -
22222
查看全部 -
11111111
查看全部 -
第一篇笔记
查看全部 -
drop-shadow
查看全部 -
<div id="container"></div> <script> var destination = document.querySelector("#container"); var Square = React.createClass({ render:function(){ var squareStyle = { //CSS样式 height: 150, backgroundColor: this.props.color }; return ( <div style={squareStyle}> </div> ); } }); var Card = React.createClass({ //父控件 render:function(){ var cardStyle = { height: 200, width: 150 }; return ( <div style={cardStyle}> <Square color={this.props.color/> //调用组件并传递属性 </div> ); } }; ReactDOM.render( <div> <Card color="#FF6663"/> //渲染 </div>, destination ); </script>查看全部 -
<div id="container"></div> <script> var destination = document.querySelector("#container"); ReactDOM.render( <h1>I am Tyler</h1>, destination ) </script>查看全部 -
父组件更新时（子组件props变更），子组件会先调用componentWillReceiveProps方法，然后执行的生命周期顺序和子组件state变更一样
查看全部 -
react生命周期
查看全部 -
React.creatclass创建组件对象是否被class xxx extends React.Component取代
查看全部 -
1.react特点：
①提高数据和界面的逻辑耦合度：
提供自动化的UI管理
数据和界面之间构造联合层，将数据变化转换成一系列事件，开发者只需根据事件转变页面状态。
②更高效的DOM操作
将对dom的操作放在虚拟dom上，通过缓存，一次提交给dom，高效。
③小个的可重用UI组件设计
④依赖JS开发界面，JSX语法结构定义界面，摆脱了CSS影响
⑤相当于MVC中的V
查看全部 -
因为react数据的单向流动，所以当嵌套组件的最内层想要获取最父级数据时，数据遵循自上而下单向流动的规则，既该数据要自父级开始经过所有嵌套的组件，才能最终到达最内层组件，如果每个组件进行props属性名的绑定，将是难以维护的。
解决办法是，依然使用props逐级传递，但是可以使用es6对象的拓展操作符，自动绑定所有属性名：<Tpl {...this.state.sth} />。
另外自react16开始，还可以使用createContext在组件之间共享数据，使用provider标签包裹父组件，consumer标签包裹子组件。
查看全部
举报
0/150
提交
取消