React 入门

资料来源：React 中文文档

⚠️注意 React重要思想：==函数式==

CDN引入

分版本 cjs[Commonjs] 与 umd[Universal Module Definition]。

引文：JS中的五种模块管理简介

使用yarn引入

yarn global add create-app-react

BaBel

Babel 是一个 JavaScript 编译器，同样地，使用 React 可以不使用 JSX 语法。在 React 官网，有很好的例子对比添加 JSX 与 没有 JSX 的区别。

使用 JSX

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="庞之明" />,
  document.getElementById('app')
);

使用React.createElement

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "庞之明" }), document.getElementById('app'));

函数组件原理

函数返回值会被延时执行，也即被调用的时候执行。

函数与普通代码

let a = b + 1;

let fn = ()=> b + 1;
let c = fn()

React函数组件

let fn = ()=> b + 1;
const n = fn()
const App = ()=> React.createElement('div',null,n)

入门案例(通过CDN引入)

https://codesandbox.io/s/great-yalow-q0685?file=/src/index.js

const React = window.React;
const ReactDOM = window.ReactDOM;
let n = 1;
const App = () =>
  React.createElement("div", null, [
    n,
    React.createElement(
      "button",
      {
        onClick: () => {
          n += 1;
          ReactDOM.render(App(), document.querySelector("#root"));
        }
      },
      "+1"
    )
  ]);

ReactDOM.render(App(), document.querySelector("#root"));

两种组件

分为类组件与函数组件。

近两年间前端UI理论为原子化理论，能跟其他物件组合为一起的组件就叫组件。在React中一个返回React元素的函数就是组件。

//元素
const div = React.createElement('div',null,'hi')
//组件，变量名约定为大写
const Div = ()=>React.createElement('div',null,'hi') 

函数组件

没有this

State

React 理念之一：不可变数据

类组件是异步修改UI

函数组件是不会改变state，产生新的state

Vue 与 React 数据模型的区别

1. Vue 推荐一个对象对应一个虚拟DOM，刚属性更新时将同时更新
2. React 采用一一对应，不改变数据的原则，需要更新数据的时候产生新的UI
3. 完全使用js来写前端