- 一、什么是react

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

1.声明式设计：React采用声明范式，可以轻松描述应用。 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活：React可以与已知的库或框架很好地配合。

在前端框架框架方面，其中的佼佼者React和AngularJS均出名门公司，具有非凡的影响力和号召力。尤其是React，它定位于前端组件化、高性能和跨平台，它提出的基于虚拟DOM的理念一出现就获得了广泛的关注和认可，也被AngularJS等其他前端框架所引入。

二、为什么要用React

1 使用组件化开发方式，符合现代Web开发的趋势 2 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全） 3 由Facebook专门的团队维护，技术支持可靠 4 ReactNative - Learn once, write anywhere: Build mobile apps with React 5 使用方式简单，性能非常高，支持服务端渲染 6 React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目

三、理解 React中的相关概念

理解 React 的基本概念（组件、状态和 JSX） React 本身其实是一个非常简单的框架，要理解它的用法，无外乎就是理解下面三个概念：组件、状态和 JSX。

使用组件的方式描述 UI 使用组件的方式描述 UI在 React 中，所有的 UI 都是通过组件去描述和组织的。可以认为，React 中所有的元素都是组件，具体而言分为两种。

内置组件。内置组件其实就是映射到 HTML 节点的组件，例如 div、input、table 等等，作为一种约定，它们都是小写字母。

自定义组件。自定义组件其实就是自己创建的组件，使用时必须以大写字母开头，例如 TopicList、TopicDetail。

和 DOM 的节点定义类似，React 组件是以树状结构组织到一起的，一个 React 的应用通常只有一个根组件。

使用 state 和 props 管理状态 React 的核心机制是能够在数据发生变化的时候自动重新渲染 UI，那么势必要有一个让我们保存状态的地方，这个保存状态的机制就是 state。而 props 就是类似于 Html 标记上属性的概念，是为了在父子组件之间传递状态。

理解 JSX 语法的本质从本质上来说，JSX 并不是一个新的模板语言，而可以认为是一个语法糖。也就是说，不用 JSX 的写法，其实也是能够写 React 的。

JSX 其实是一种语法糖。理解这一点非常重要，因为它意味着两点：

JSX 的表达能力等价于 JavaScript 的表达能力，那么所有我们可能需要的机制，比如循环、条件语句等等，JSX 其实都能灵活表达。 JSX 几乎不需要学习，只要你会用 JavaScript，就也会用 JSX。所以这也是 React 的“模板语言”区别于 Angluar 和 Vue 的地方，JSX 不是一个新的概念，而只是原生 JavaScript 的另一种写法。但是换成这种写法，就会大大降低你上手 React 的难度。

React中的核心概念 1 虚拟DOM（Virtual DOM） 2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）
虚拟DOM（Vitural DOM） React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率。

为什么用虚拟dom，当dom反生更改时需要遍历而原生dom可遍历属性多大231个且大部分与渲染无关更新页面代价太大。

VituralDOM的处理方式 1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中 2 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

四、React 开发环境搭建

使用webstorm IDE 官网：www.jetbrains.com/help/websto…

确保您的计算机上有 Node.js。

打开和运行计算机上已有的react项目 1）单击“打开”，或从主菜单中选择“文件 | 打开”。在打开的对话框中，选择源代码的文件夹。

2）下载依赖项单击弹出窗口中的 Run’npm install’或 Run’yarn install’:

或控制台 npm install 接着npm install 报错的话，建议可以使用这个命令：

npm install -g cnpm --registry=registry.npmmirror.com cnpm install 1 2 3）点击Run，在运行设置中，Command中设置为run，stcrip中设置为run，如下图所示：

运行一个 React项目 cd D://project/my-app npm run dev

如何运行项目 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写。 npm run XXX是执行配置在 package.json 中的脚本，

一个使用 better-npm-run 的demo： `

"scripts": {
```
"clean": "rimraf dist",
```
```
"compile": "better-npm-run compile",
```
```
"lint": "eslint src tests server",
```
```
"lint:fix": "npm run lint -- --fix",
```
```
"start": "better-npm-run start",
```
```
"dev": "better-npm-run dev",
```
```
"portal": "better-npm-run portal",
```

"test": "jest --config jest.config.js",

```
"test:dev": "npm run test -- --watch",
```
```
"deploy": "better-npm-run deploy",
```

"deploy:dev": "better-npm-run deploy:dev",

"deploy:prod": "better-npm-run deploy:prod",

"codecov": "cat coverage/*/lcov.info | codecov",

```
"i18n": "better-npm-run i18n"
```
},
"betterScripts": {
```
"compile": {
```
```
  "command": "node bin/compile",
```
```
  "env": {
```
```
    "DEBUG": "app:*"
```
```
  }
```
```
},
```
```
"i18n": {
```
```
  "command": "babel-node bin/i18n",
```
```
  "env": {
```
```
    "DEBUG": "app:*"
```
```
  }
```
```
},
```
```
"dev": {
```

  "command": "node --max_old_space_size=2048 bin/server",

```
  "env": {
```
```
    "NODE_ENV": "development",
```
```
    "APP": "main",
```
```
    "DEBUG": "app:*",
```
```
    "PROTOCOL": "http",
```
```
    "API_HOST": "192.168.13.1",
```
```
    "API_PORT": 8300,
```
```
    "HOST": "localhost",
```
```
    "PORT": 8000
```
```
  }
```
```
},
```
...` 如上：

使用 better-npm-run，更好的 NPM 脚本运行器包链接 betterScripts 脚本定义可以是带有命令和 env 属性的字符串或子对象。在 env 块中定义的值将覆盖先前设置的环境变量。 “command”: “node --max_old_space_size=2048 bin/server” 指定了node具体要执行js文件为 bin路径下的server.js 注意：“PROTOCOL”: “http”, 这个配置比较重要，如果配置成 https，那么django后台会报（django默认只支持http）：ERROR You’re accessing the development server over HTTPS, but it only supports HTTP. 所以当我们开发自测联调时，我们PROTOCOL配置成http。当然你前端联调环境是https时，我们需要改成https！！！

总结：npm run xxx，并不是你想运行就运行的，只有在 package.json scripts 配置了，你才能 run 的，所以不是所有的项目都能 npm run dev/build。要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。

第二部分：入门教程: 认识 React 官方教程： react.docschina.org/tutorial/tu… 官方快速开始：react.docschina.org/docs/gettin…

一、核心概念官网：react.docschina.org/docs/hello-…

最简易的 React 示例如下：

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') 它将在页面上展示一个 “Hello, world!” 的标题。

JSX 简介考虑如下变量声明：

const element = <h1>Hello, world!</h1>; 1 这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

JSX 可以生成 React “元素”。我们将在下一章节中探讨如何将这些元素渲染为 DOM。下面我们看下学习 JSX 所需的基础知识。

在 JSX 中嵌入表达式在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：

const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>;

ReactDOM.render( element, document.getElementById('root') ); 在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。JSX语法只是React.creatElement(component, props, …children) 的语法糖，所有的JSX语法最终都会被转换成对这个方法的调用。

元素渲染元素是构成 React 应用的最小砖块。

元素描述了你在屏幕上想看到的内容。

const element = <h1>Hello, world</h1>;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

你可能会将元素与另一个被熟知的概念——“组件”混淆起来。我组件是由元素构成的。

将一个元素渲染为 DOM 假设你的 HTML 文件某处有一个： <div id="root"></div> 1 我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。

id为root的div，是一个特殊的div，该节点内的所有内容都将由 React DOM 管理！

比如，我们定义一个index.html

Hi React!

` 想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root')); 1 2 更新已渲染的元素 React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

组件 & Props 渲染组件

之前，我们遇到的 React 元素都只是 DOM 标签：

const element =

; 1 不过，React 元素也可以是用户自定义的组件：

const element = ; 1 当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

例如，这段代码会在页面上渲染 “Hello, Sara”： ` function Welcome(props) { return ; }

const element = ; ReactDOM.render( element, document.getElementById('root') );` 我们调用 ReactDOM.render() 函数，并传入作为参数。 React 调用 Welcome 组件，并将 {name: ‘Sara’} 作为 props 传入。 Welcome 组件将元素作为返回值。 React DOM 将 DOM 高效地更新为注意：组件名称必须以大写字母开头。

**React 会将以小写字母开头的组件视为原生 DOM 标签。**例如，

代表 HTML 的 div 标签，而则代表一个组件，并且需在作用域内使用 Welcome。
组件是React的核心概念，是React应用程序的基石。定义一个组件有2种方式，使用ES 6 class（类组件）和使用函数（函数组件）。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
使用class定义组件需要满足两个条件：
class继承自React.Component。
class内部必须定义render方法，render方法返回代表该组件UI的React元素。
将函数组件转换成 class 组件
通过以下五步将 Clock 的函数组件转成 class 组件：
创建一个同名的 ES6 class，并且继承于 React.Component。
添加一个空的 render() 方法。
将函数体移动到 render() 方法之中。
在 render() 方法中使用 this.props 替换 props。
删除剩余的空函数声明。
每次组件更新时 render 方法都会被调用。

事件处理 React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。例如，传统的 HTML： <button onclick="activateLasers()"> Activate Lasers </button> 在 React 中略微不同： <button onClick={activateLasers}> Activate Lasers </button>

在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

<a href="#" onclick="console.log('The link was clicked.'); return false"> Click me </a> 在 React 中，可能是这样的：

function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); }

return ( Click me ); }

在这里，e 是一个合成事件。React 根据 W3C 规范来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。

当你使用 ES6 class 语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。

列表 & Key TODO

react基础 | 青训营笔记

- 一、什么是react

二、为什么要用React

三、理解 React中的相关概念

四、React 开发环境搭建