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()

一个简单的弹窗组件

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180109A0FXE700?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区