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,用来表示组件的输出。需要注意:

  1. 只能通过 this.props 和 this,state 访问数据;
  2. 只能返回一个节点,如:
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;

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

MultiRow发现之旅(一)- 高效模板设计器

在这篇博客中我将向大家介绍一个集成在VisualStudio中的很酷很给力的设计器——MultiRow模板设计器。它与VisualStudio无缝集成,提供与V...

1738
来自专栏ThoughtWorks

React.Component损害了复用性?|TW洞见

本文转载自InfoQ: http://www.infoq.com/cn/articles/more-than-react-part02 本系列的上一篇文章《为什...

3329
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。

1.1K18
来自专栏张戈的专栏

解决卸载WP No Category Base插件后页面出现404的问题

其实这个插件已经卸载几天了,用了歌神分享的代码版。今天改代码时候,刷新主题的几个文件,包括 functions.php,结果悲剧的事情发生了: ? 所有文章页面...

3297
来自专栏web编程技术分享

第五节 关于浮动和清除浮动的解说,以及两个大坑不要踩

3387
来自专栏禁心尽力

Shiro眼皮下玩ajax,玩出302 Found

1   public static String sendCode(String url,String encoded,String mobile,Stri...

2208
来自专栏木头编程 - moTzxx

小程序 微信退款功能实现讲解 (PHP方式)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1632
来自专栏阮一峰的网络日志

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度...

3737
来自专栏互联网杂技

开始学习React js

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件...

3496
来自专栏破晓之歌

Vue+element注册表单判定 原

手机号已被注册的判定就是通过增加了一个isReg的变量判断,使用userPhoneExist()这个方法来确定是否显示的

1683

扫码关注云+社区