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标签包裹子组件。

getDefaultProps: receive props from outsize

getInitialState: set default state object

componentWillMount: component will about to mount

componentDidMount: component is just mount

shouldComponentUpdate: should component update? return true or false

componentWillUpdate: component is about update

componentDidUpdate: compoent is just updated

SPA 单页模型

困难

1. 如何保持数据与 UI 同步更新

2. 如何提高 DOM 操作的效率

3. HTML 开发 UI 界面异常复杂

可以啊，入门课程。

getInitialState组件在被浏览器调用之前加载，用作初始化（组件内部数据）

kkjk

Ssssssssssssssssssssssssssss

组件把界面绘制的逻辑包装起来，通过给组件传入不同的参数，进而改变组件在界面中显示形态，同时组件可以转化成多个简单的组件的组合。

ReactDom.render两个参数：

1.jsx 对象 会把传入的对象进行组织表述出来，react 会把它转化为creteElemet调用，会在浏览器中添加相应的dom元素，进而改变dom模型后，使得浏览器在渲染后作出改变。

2.dom元素要挂载的节点。

react销毁当前组件ReactDOM.unmountComponentAtNode(id)

getDefaultProps 返回的是this.props
getInitialState  返回的是 this.state