React 入门学习

更多腾讯海量技术文章，请关注云加社区：https://cloud.tencent.com/developer

作者：李芳

React 简介

React 是 Facebook 公司 2013 年推出的前端框架，是一个 UI 组件，主要负责将数据展现给用户，不带任何业务逻辑，所有显示的数据都是通过属性（this.props）来提供，它允许将代码封装成组件，然后像使用普通 HTML 标签一样使用这个组件，大大提高了代码的复用性，也便利了团队的分工与合作。

React 有用的知识点

React 安装

JSX 语法

Reacts 使用 JSX，JSX 是一个类似 XML 的 JavaScript 语法扩展，使用 JSX 执行更快,编写模板更加简单快速。

组件形式

React 允许将代码封装成组件形式，这个组件可以像普通的 HTML 标签一样被 DOM 结构引用，它们的区别是通过首字母大小写来区分的，HTML 标签使用的是小写的字符串，而 React 组件使用大写开头的字符串。

上面代码中 Main 和 WxErcodeDialog 都是自定义的组件，首字符都是大写。

state 和 props

state 可根据用户与应用网站的交互来改变，当用户与网站应用进行交互，会得到不同的 state，不同的 state 会触发更新用户界面和数据。props 是组件的属性，它不可更改，只可读，用来传递数据，如上面例子中的 trial=。

render 方法

render 方法是组件唯一一个必需的方法，它会创建一个虚拟 DOM，用来表示组件的输出。需要注意：

只能通过 this.props 和 this,state 访问数据；

只能返回一个节点，如：

组件的生命周期

组件分为已插入真实 DOM，正在被重新渲染，已经移出真实 DOM 等三个状态。React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，对应的方法有：

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

一个简单的弹窗组件