React 入门学习
原创
作者：李芳
React 简介
React 是 Facebook 公司 2013 年推出的前端框架，是一个 UI 组件，主要负责将数据展现给用户，不带任何业务逻辑，所有显示的数据都是通过属性（this.props）来提供，它允许将代码封装成组件，然后像使用普通 HTML 标签一样使用这个组件，大大提高了代码的复用性，也便利了团队的分工与合作。
React 有用的知识点
React 安装
React 的安装包可以去官网下载，在使用的页面直接用包含就可以了，一般要包含 react.js，react-dom.js，browser.min.js 或者 babel.min.js 等，但是在实际应用中会在服务器部署 babel 进行转码。
JSX 语法
Reacts 使用 JSX，JSX 是一个类似 XML 的 JavaScript 语法扩展，使用 JSX 执行更快,编写模板更加简单快速。
组件形式
React 允许将代码封装成组件形式，这个组件可以像普通的 HTML 标签一样被 DOM 结构引用，它们的区别是通过首字母大小写来区分的，HTML 标签使用的是小写的字符串，而 React 组件使用大写开头的字符串。
var Detail = function(props) {
return (
<div>
<Main trial={props.trial}
onApply={props.switchWxErCodeDialog.bind(this, true)}/>
<WxErcodeDialog visible={props.visibleWXErcodeDialog}
onClose={props.switchWxErCodeDialog.bind(this, true)}/>
</div>
);
};
上面代码中 Main 和 WxErcodeDialog 都是自定义的组件，首字符都是大写。
state 和 props
state 可根据用户与应用网站的交互来改变，当用户与网站应用进行交互，会得到不同的 state，不同的 state 会触发更新用户界面和数据。props 是组件的属性，它不可更改，只可读，用来传递数据，如上面例子中的 trial={props.trial}。
render 方法
render 方法是组件唯一一个必需的方法，它会创建一个虚拟 DOM，用来表示组件的输出。需要注意：
- 只能通过 this.props 和 this,state 访问数据；
- 只能返回一个节点，如：
var Welcome = React.creatClass({
render: functiion(){
return (
<h1>Welcome to our company</h1>
<h1>My dear friend</h1>
);
}
});
上面的方法是错的，因为有两个节点，正确的写法如下：
var Welcome = React.creatClass({
render: functiion(){
return (
<div>
<h1>Welcome to our company</h1>
<h1>My dear friend</h1>
</div>
);
}
});
组件的生命周期
组件分为已插入真实 DOM，正在被重新渲染，已经移出真实 DOM 等三个状态。React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，对应的方法有：
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
一个简单的弹窗组件
import React, {PropTypes, Component} from 'react';
require('./wxErcode.css');
const style = {
height: '368px',
width: '100%'
};
class WxErcodeDialog extends Component {
render() {
var props = this.props;
var state = this.state;
return( props.visible ? <div className="ercode-pop">
<div class="mask"></div>
<div className="ercode">
<span className="ercode-pop-close" onClick={props.onClose}></span>
</div>
</div> : false);
}
}
WxErcodeDialog.propTypes = {
visible: PropTypes.bool
};
WxErcodeDialog.defaultProps = {
visible: false
};
export default WxErcodeDialog;原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。