零、安装
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
一、是什么
1.React 是一个用于构建用户界面的 JAVASCRIPT 库。
2.主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
3.React 拥有较高的性能，代码逻辑非常简单
特点
1.声明式设计 −采用声明范式，可以轻松描述应用。
2.高效 −通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但建议使用。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它比传统数据绑定更简单的原因
二、JSX
/*引入*/
<script type="text/babel" src="xxx.js"></script>
一些需要注意的问题
使用 JavaScript 表达式。表达式写在花括号 {} 中。
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
关于React注释的问题：
1、在标签内部的注释需要花括号
2、在标签外的的注释不能使用花括号
ReactDOM.render(
/*注释 */
<h1>孙朝阳 {/*注释*/}</h1>,
document.getElementById('example')
);
代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它
1.错误例子：
ReactDOM.render(
<h1>这是错误的例子</h1>
<span>假设这里是标题下面的内容</span>,
document.getElementById("example")
);
2.正确例子：
ReactDOM.render(
<section>
<h1>这是正确的例子</h1>
<span>假设这里是标题下面的内容</span>
</section>,
document.getElementById("example")
);
由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
三、组件
React.createClass 方法用于生成一个组件类 HelloMessage。
var HelloMessage = React.createClass({/*生成一个组件类 HelloMessage*/
render: function() {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,/*实例组件类并输出信息*/
document.getElementById('example')
);
四、React State(状态)
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
<script type="text/babel">
var LikeButton = React.createClass({
/*定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取*/
getInitialState: function() {
return {liked: false};
},
/*当用户点击组件，导致状态变化，this.setState 方法就修改状态值，
每次修改以后，自动调用 this.render 方法，再次渲染组件*/
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
五、React Props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
六、React 组件 API
设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted
七、React 组件生命周期
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
componentWillMount : 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps: 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate: 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate:在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate: 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。
八、React AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
/*获取 Github 用户最新 gist 共享描述:*/
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.username} 用户最新的 Gist 共享地址：
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
);
网友评论