React 基础

React

  • 用于构建用户界面的 javascript 库
  • Declarative(声明式) Component-Based(组件化)
  • 单向数据流

参考文档

JSX

  • JSX 全称 JavaScript XML,是一种类似于XML的 JS 扩展语法
  • React.createElement(component, props, ...children) 方法的语法糖

注意点

  • 标签内部不要使用单引号或双引号
  • 使用 js 表达式需要使用 { EXPRESSION }
  • 标签类名使用 className 指定,而不是 class
  • 行内样式需要传入对象,格式为 style={{ CSS_STYLE }}
  • 只能有一个根标签
  • 所有标签必须闭合,自结束标签或同名结束标签均可

使用 jsx 创建 vdom 对象

const idName = "DEMO";
const conName = "Hello,React!";
const VDom = (
  <div>
    <h1 id={idName.toLowerCase()}>
      <span className="title" style={{ fontSize: "50px" }}>
        {myContent}
      </span>
    </h1>
    <h2>A JavaScript library for building user interfaces</h2>
    <input type="text" />
  </div>
);
ReactDOM.render(VDom, document.getElementById("root"));

组件化

引入React import React, { Component } from "react";

函数定义组件

function VDom() {
  return (
    <div>
      <h2>React by Facebook</h2>
      <h3>A JavaScript library for building user interfaces</h3>
    </div>
  );
}

ReactDOM.render(VDom, document.getElementById("root"));

类定义组件(es6)

编写 react.js 组件的时候,一般都需要继承 react.js 的 Component,一个组件类必须要实现一个 render 方法,该 render 方法必须要返回一个 jsx 元素,且只能有一个根标签。

class VDom extends Component {
  state = {
    isUpdated: true,
  }
  
  changeUpdateState = () => {
    let { isUpdated } = this.state;
    this.setState({ isUpdated: !isUpdated });
  };
  
  render() {
    return (
      <div>
        <h2>React by Facebook</h2>
        <h3>A JavaScript library for building user interfaces</h3>
        
        <h3>Antd is a design system for enterprise-level products.</h3>
        <h3>Today {this.state.isUpdated ? "Release a new version" : "No updates"}</h3>
        
      </div>
    );
  }
}

ReactDOM.render(VDom, document.getElementById("root"));

state 用来存储可变状态,使用赋值语句和箭头函数来保证 this 指向实例化对象。