您的位置:首页 > Web前端 > React

初识react

2016-02-29 10:08 633 查看
react 被称为颠覆式前端开发

react不是一个完整的mvc,并认为mvc并不适应所有开发场景

官网:
http://facebook.github.io/react/index.html


1.

<script type="text/jsx">

<strong>var Hello=React.createClass(

render:function(){

return <div>Hello {this.props.name}</div>

});

 React.render(<hello name="World"/>,document.getElementById('container'));</strong>

注:其中的<div>并不是dom节点,而是react divcomponent的一个实例

2.class在js语言的 标准是一个关键字,不能直接在react的标签中是用class,改用classname

3.内联样式的stylecss注意,写作style={{color:'red'}}

实质为:

var styleObj={color:'red'};

style={styleObj}

4.React Components Lifecycle

Mounted:render解析生成dom的过程

update:mounted components被重新render的过程

unmounted:mounted Components对应的Dom节点被从dom结构中移除的过程。

注:每个状态react都封装了对应的hook函数

5.各阶段函数

Mounting: getInitialState()

componentWillMount()

render()

componentDidMount()

Updating: componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

Unmounting: componentWillUnmount()

6.state私有,props属于被调用方

7.setTimeout函数中this表示运行环境(全局对象global,即windows),不表示调用函数的对象

8.react事件监听处理
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: