引入

CDN

https://www.bootcdn.cn/

  • 用 umd，兼容各种浏览器
  • 需要引入 React 与 ReactDOM
  • CDN 引入的会变成全局变量

// index.html

  1. <body>
  2.     <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
  3.     <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
  4.   <script>
  5.   console.log(window.React)
  6.   </script>
  7. </body>
  • cjs 和 umd 的区别：cjs（CommonJS）是 Node.js 支持的规范模块，umd 是同意模块定义，兼容各种模块规范(同时支持 Node.js 和浏览器)，一般先使用 umd。最新的模块规范是使用 import 和 export 关键字。

    通过 webpack 引入 React

    1. yarn add react react-dom
    1. import React from 'react;
    2. import ReactDOM from 'react-dom';

    create-react-app

    create-react-app
    目前使用这个

安装

  1. yarn global add create-react-app

创建项目 react-demo-1

  1. create-react-app react-demo-1

在当前目录下创建，使用 Typescript

  1. create-react-app . --template typescript

开发

  1. cd react-demo-1
  2. yarn start

结局每次 yarn start 后自动新开窗口的问题：创建 .env 文件

  1. BROWSER = none

配置项目请看 React 项目配置

使用 React 开发

利用函数回调实现响应式，即值变化就调用函数重新渲染

  • React.creatElement 返回的是一个虚拟 DOM对象（代表一个 div），该函数可多次执行，每次得到最新的虚拟 DOM，React 会找出两个虚拟 DOM 的不同（DOM Diff 算法）局部更新视图
  • React.creatElement(elem, attr, elem.innerHTML)，其中，参数 elem 若传入：
    • 字符串 ‘div’，则创建 div 元素
    • 函数，则调用函数，获取返回值
    • 类，则 new 一个组件对象（执行 constructor），然后调用组件的 render 方法，获取返回值
  • React.creatElement 第二个参数 attr 传入属性：style ，事件等
  • ReactDOM.render(App(), root) 相当于 root.innerHTML = App()

+1 按钮

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. const root = document.querySelector('#root');
  5. let n = 0;
  6. const App = () => React.createElement('div', null, [
  7.   n,
  8.   React.createElement('button', {
  9.     onClick: () => {
  10.       n += 1;
  11.       ReactDOM.render(App(), root); 
  12.       // 每次 n 变化，就使用回调重新渲染，因此 APP 最好定义为一个函数而不是 DOM 元素
  13.     }
  14.   }, '+1')
  15. ])
  17. ReactDOM.render(App(), root);

App = React.creatElement('div', null, n) 是一个 React 元素，会立即执行。
App = () => React.creatElement('div', null, n) 是一个函数组件，调用时才执行。
此处说的是函数额调用时机，不是同步和异步，同步和异步的差别是得到结果的时机