react入门——慕课网笔记

一、 jsx

　　1. 被称为语法糖：糖衣语法，计算机语言中添加的某种语法，对语言的功能没有影响，更方便程序员使用，增加程序的可读性，降低出错的可能性

　　　　类似的还有（coffeescript，typescript），最终都被解析为js

　　2. 解析jsx的是jsxtransformer.js      指定jsx语法用<text/jsx>

　　3. 通过以下代码渲染dom

1 React.render(<hello name=”world”/>,
2 Document.getElementbyId(“container”));

var hello = React.createClass({
    render: function(){
        return <div>hello {this.props.name}</div>;
     }
});

React.render(<hello name="world"/>,
document.getElementById("container‘));

　　props是指属性组，this是实例

二、 css

　　1. class

　　　不能在标签上直接写class，需要改为className  (由于此处非真正的dom，class是关键字，不能解析）

var Hello = React.createClass({
    render: function(){
        return <div className="redfont">hello {this.props.name}</div>;
    }
});

　　2. 内联式

　     不能字符串来表示，需要用样式对象来表示，样式对象是以驼峰标示写法，值为样式值

var Introduce = React.createClass({
    render: function(){
    return <div style={{fontSize:‘44px‘}}>{this.props.info}</div>;
    }
});

　　{}中是执行表达式

　　{{}}内联样式写法

　　驼峰表达式：

render: function(){
    //定义样式内容，样式obj
    var styleObj = {
        color: ‘red‘,
        fontSize:‘32px‘
    };
    //className代替class
    return <div className="redfont" style={styleObj}>hello {this.props.name}</div>;
}

三、React components生命周期

　　1. Mounted是:React Components被render解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。

　　2. Update是:一个mounted的React Components被重新render的过程。
　　　对比当前state变化

　　　State

　　　每一个状态react都封装了对应的hook函数~钩子

　　　这种函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。

　　　对事件进行hook后系统会受到相应通知

　　3.Unmounted是:一个mounted的React Components对应的DOM节点被从DOM结构中移除的这样一个过程。

　　　　GetInitialstate

　　　　最终返回一个object其中包含其state

getInitialState:function(){
    alert(‘init‘);
    return {
    opacity:1.0
    };
}

　　　　This

　　　　是伴随函数生成时的函数内部实例对象

　　　　随着函数运行在不同的环境发生变化

　　　　始终指的是调用函数的那个对象

1. 1. 　当其出现在settimeout函数参数中时，由于函数参数就是一个纯粹的函数调用，不隶属于其他对象，隶属于全局对象，属于global
   2. 　当其出现在setinistialstate这样的函数体内，是作为其所属实例对象的方法来调用，此时this指component实例对象
   3. 　This出现在构造函数：

function test(){
    this.x = 1;
}
var o = new test();

　　　　this 指新生成的对象

　　　　　　4.   This出现在apply call bind等方法

　　　　　　　　作用函数的调用对象，指第一个参数

四、 React-component-listener

1. Dom更新

　　传统：直接修改dom的innerhtml或classname

　　事件绑定：Eventlistener

　　React：

　　给组件添加事件绑定（on驼峰式命名方式）

　　添加点击事件：onClick={this.xxxxx}

　　与dom绑定不一样，这里不是真实的dom节点，大小写敏感，通过对象属性定义在对象实例上

var Btnclick = React.createClass({
    handleClick: function(event){
    },

　　Event对象是在js原生基础上封装的，因此同时具有原生event方法

　　2. 获取组件

　　1）使用‘ref’ property标记组件

　　用ref属性给子组件添加名字，通过this.refs可以索引到子组件

render: function (){
    return(
        <div>
            <button onClick={this.handleClick}>显示|隐藏</button>
            <span ref="tip">    点击测试</span>
        </div>
    );
 }

　　this.refs.tip

　　索引到的是react component而不是真实的dom节点

　　2）在dom里获得这个节点：

　　使用react提供的方法：ReactDOM.findDOMNode(react component)

五、 注意事项

　　1. 注意react更新后的变化

　　2. 返回虚拟dom时包装为一个div，保证返回一个结果

　　3. 组件的首字母必须大写，不然不报错也不显示

以上为慕课网《react入门》总结，所有试验代码地址已上传至git：

react入门——慕课网笔记

原文：http://www.cnblogs.com/chaoran/p/6284230.html