React 初探(一)

2019-01-03  本文已影响249人  bowen_wu

最近刚刚做完一个移动端的 React 的项目,想把其中的一些问题记录一下。

整体结构

  1. 学习 React
  2. 上手一个项目

概述

React is a JavaScript library for building user interfaces.

那么如何使用 React 生成标签?又是如何将标签渲染到 DOM 中的呢?

上手一个 demo

React.createElement()
直接在线运行这个 demo,当点击 change button 的时候,文字将会改变。代码主要写了以下:
  1. 声明变量 textonButtonClick 函数,函数里面主要是更改 text 变量,之后运行 render 函数
  2. 运行 render 函数
  3. 声明 render 函数,render 函数主要做了:
    • 创建 span + button + div
    • 运行了 ReactDOM.render

通过这个 demo 可以知道:

API

React.createElement()

React.createElement(
  type,
  [props],
  [...children]
)

ReactDOM.render()

ReactDOM.render(element, container[, callback]);

JSX -> JavaScript extension

JSX 是一种 JavaScript 的语法扩展,JSX 代表 Object。在编译之后 JSX 会被转化为普通的 JavaScript 对象Babel 转译器(babel online)会把 JSX 转换成 React.createElement() 来调用。JSX 就是用 HTML 的形式来写 JavaScript。使用:

  1. 在 JSX 中 JavaScript 表达式 要包含在大括号里
  2. 需要在 JSX 代码外面扩上一个小括号
  3. 使用引号定义以字符串为值的属性,也可以使用大括号来定义以 JavaScript 表达式为值的属性,切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了,JSX 会将引号当中的内容识别为字符串而不是表达式
  4. JSX 标签是闭合的,可以使用 />来闭合,并且可以相互嵌套
  5. 在 JSX 中使用小驼峰命名法来定义属性名称,而不是 HTML 属性名称

上述 demo 使用 JSX 书写在线运行

JSX 书写

React fragment

React.fragment 组件允许在 render 方法中返回多个元素,而不会创建额外的 DOM 元素

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

stateless components

虚拟 DOM

demo

虚拟 DOM
在这个 demo 中,span 便是虚拟 DOM虚拟 DOM 就是一个表示 DOM 节点的对象。是非真实的 DOM,一般用对象来表示。
上一篇 下一篇

猜你喜欢

热点阅读