作者:李芳
React 是 Facebook 公司 2013 年推出的前端框架,是一个 UI 组件,主要负责将数据展现给用户,不带任何业务逻辑,所有显示的数据都是通过属性(this.props)来提供,它允许将代码封装成组件,然后像使用普通 HTML 标签一样使用这个组件,大大提高了代码的复用性,也便利了团队的分工与合作。
React 的安装包可以去官网下载,在使用的页面直接用包含就可以了,一般要包含 react.js,react-dom.js,browser.min.js 或者 babel.min.js 等,但是在实际应用中会在服务器部署 babel 进行转码。
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 可根据用户与应用网站的交互来改变,当用户与网站应用进行交互,会得到不同的 state,不同的 state 会触发更新用户界面和数据。props 是组件的属性,它不可更改,只可读,用来传递数据,如上面例子中的 trial={props.trial}。
render 方法是组件唯一一个必需的方法,它会创建一个虚拟 DOM,用来表示组件的输出。需要注意:
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 删除。