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

相关文章

来自专栏移动端开发

iOS 转场动画探究(二)

这篇文章是接着第一篇写的,要是有同行刚看到的话建议从前面第一篇看,这是第一篇的地址:iOS 转场动画探究(一) 接着上一篇写的内容:        上一篇iOS...

2697
来自专栏游戏杂谈

Flex + XML的图片轮显

逻辑部分与JavaScript有些类似,在解析XML时,单独写了一个as类来处理,btn的外观使用了CSS进行控制,资源全部放在名为assets文件夹目录下,工...

571
来自专栏破晓之歌

React组件(推荐,差代码) 原

react官方教程:https://reactjs.org/tutorial/tutorial.html

682
来自专栏滕先生的博客

UIWebView 浏览器控件一、初始化与三种加载方式二、常用属性和方法三、代理方法 UIWebViewDelegate四、其它案例:

2906
来自专栏大前端_Web

Vue与React的异同—生命周期(一)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

2525
来自专栏贺贺的前端工程师之路

React Native生命周期生命周期props和state

然后,准备加载组件,会调用 componentWillMount() ,其原型如下: void componentWillMount() 这个函数调用时机是...

702
来自专栏移动端开发

iOS 转场动画探究(二)

这篇文章是接着第一篇写的,要是有同行刚看到的话建议从前面第一篇看,这是第一篇的地址:iOS 转场动画探究(一)

1254
来自专栏Java Edge

React.js实战之React 生命周期1 组件的生命周期

1504
来自专栏韦弦的偶尔分享

Swift 视图抖动扩展一

1061
来自专栏一个会写诗的程序员的博客

React State(状态): React通过this.state来访问state,通过this.setState()方法来更新stateReact State(状态)

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。 React 里...

1153

扫码关注云+社区