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 条评论
登录 后参与评论

相关文章

来自专栏小古哥的博客园

初级React入门

一、引入Reactjs 方法一:直接下载相关js文件引入网页,其中react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的...

2887
来自专栏一直在跳坑然后爬坑

Flutter “跳转页面”(一)

“跳转页面”为啥加双引号,其实所谓的跳转页面可能和以前认识的不太一样。因为在Flutter里,所有能看到的东西一般都是widget,但是,没有说那个app是由一...

1133
来自专栏前端儿

React 基础实例教程

首先,需要核心库react.js与React的DOM操作组件react-dom.js

662
来自专栏前端学习心得

React三大突出特点

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

React 入门实例教程

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

3697
来自专栏岑志军的专栏

ReactNative-综合案例(02)

1157
来自专栏向治洪

MobX 在 React Native开发中的应用

MobX 是一款精准的状态管理工具库,如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux,那毫不犹...

2147
来自专栏React Native开发圈

React Native 文档查看组件

GitHub - forrest23/ReactNativeComponents: React Native组件大全

911
来自专栏iKcamp

翻译 | 玩转 React 表单 —— 受控组件详解

原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本...

28010
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native之React速学教程(上)

React Native之React速学教程(上) 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发R...

2708

扫码关注云+社区