1. React 简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友）的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。
Angular1 2009 年谷歌 MVC 不支持组件化开发
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
清楚两个概念：
- library（库）：小而巧的库，只提供了特定的 API；优点就是船小好掉头，可以很方便的从一个库切换到另外的库；但是代码几乎不会改变；
- Framework（框架）：大而全的是框架；框架提供了一整套的解决方案；所以，如果在项目中间，想切换到另外的框架，是比较困难的；

2. 前端三大主流框架

三大框架一大抄

Angular.js：出来较早的前端框架，学习曲线比较陡，NG1 学起来比较麻烦，NG2 ~ NG5 开始，进行了一系列的改革，也提供了组件化开发的概念；从 NG2 开始，也支持使用 TS（TypeScript）进行编程；
Vue.js：最火（关注的人比较多）的一门前端框架，它是中国人开发的，对我我们来说，文档要友好一些；
React.js：最流行（用的人比较多）的一门框架，因为它的设计很优秀；

3. React 与 Vue 的对比

组件化方面

什么是模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块；便于项目的维护和开发；
什么是组件化： 是从 UI 界面的角度来进行分析的；把一些可服用的 UI 元素，抽离为单独的组件；便于项目的维护和开发；
组件化的好处：随着项目规模的增大，手里的组件越来越多；很方便就能把现有的组件，拼接为一个完整的页面；
Vue 是如何实现组件化的：通过 .vue 文件，来创建对应的组件；
- template 结构
- script 行为
- style 样式

React 如何实现组件化：大家注意，React 中有组件化的概念，但是，并没有像 vue 这样的组件模板文件；React 中，一切都是以 JS 来表现的；因此要学习 React，JS 要合格；ES6 和 ES7 （async 和 await）要会用；

开发团队方面

React 是由 FaceBook 前端官方团队进行维护和更新的；因此，React 的维护开发团队，技术实力比较雄厚；
Vue：第一版，主要是有作者尤雨溪专门进行维护的，当 Vue 更新到 2.x 版本后，也有了一个以尤雨溪为主导的开源小团队，进行相关的开发和维护；

社区方面

在社区方面，React 由于诞生的较早，所以社区比较强大，一些常见的问题、坑、最优解决方案，文档、博客在社区中都是可以很方便就能找到的；
Vue 是近两年才火起来的，所以，它的社区相对于 React 来说，要小一些，可能有的一些坑，没人踩过；

移动 APP 开发体验方面

Vue，结合 Weex 这门技术，提供了迁移到移动端 App 开发的体验（Weex，目前只是一个小的玩具，并没有很成功的大案例；）
React，结合 ReactNative，也提供了无缝迁移到移动 App 的开发体验（RN 用的最多，也是最火最流行的）；

4. 为什么要学习 React

和 Angular1 相比，React 设计很优秀，一切基于 JS 并且实现了组件化开发的思想；
开发团队实力强悍，不必担心断更的情况；
社区强大，很多问题都能找到对应的解决方案；
提供了无缝转到 ReactNative 上的开发体验，让我们技术能力得到了拓展；增强了我们的核心竞争力；
很多企业中，前端项目的技术选型采用的是 React.js；

5. React 中几个核心的概念

虚拟 DOM（Virtual Document Object Model）

DOM 的本质是什么：浏览器中的概念，用 JS 对象来表示页面上的元素，并提供了操作 DOM 对象的 API；
什么是 React 中的虚拟 DOM：是框架中的概念，是程序员用 JS 对象来模拟页面上的 DOM 和 DOM 嵌套；
为什么要实现虚拟 DOM（虚拟 DOM 的目的）：为了实现页面中， DOM 元素的高效更新
DOM 和虚拟 DOM 的区别：
- DOM：浏览器中，提供的概念；用 JS 对象，表示页面上的元素，并提供了操作元素的 API；
- 虚拟 DOM：是框架中的概念；而是开发框架的程序员，手动用 JS 对象来模拟 DOM 元素和嵌套关系；
  - 本质：用 JS 对象，来模拟 DOM 元素和嵌套关系；
  - 目的：就是为了实现页面元素的高效更新；

Diff 算法

tree diff:新旧两棵 DOM 树，逐层对比的过程，就是 Tree Diff；当整颗 DOM 逐层对比完毕，则所有需要被按需更新的元素，必然能够找到；
component diff：在进行 Tree Diff 的时候，每一层中，组件级别的对比，叫做 Component Diff；
- 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新；
- 如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上；
element diff：在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做 Element Diff；

6. 创建基本的 webpack4.x 项目

运行npm init -y 快速初始化项目
在项目根目录创建src源代码目录和dist产品目录
在 src 目录下创建 index.html
使用 cnpm 安装 webpack ，运行cnpm i webpack webpack-cli -D
- 如何安装 cnpm: 全局运行 npm i cnpm -g
注意：webpack 4.x 提供了约定大于配置的概念；目的是为了尽量减少配置文件的体积；
- 默认约定了：
- 打包的入口是src -> index.js
- 打包的输出文件是dist -> main.js
- 4.x 中新增了 mode 选项(为必选项)，可选的值为：development 和 production;

7. 在项目中使用 react

运行 cnpm i react react-dom -S 安装包
- react：专门用于创建组件和虚拟 DOM 的，同时组件的生命周期都在这个包中
- react-dom：专门进行 DOM 操作的，最主要的应用场景，就是ReactDOM.render()

在index.html页面中，创建容器：

<!--
  容器，将来，使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中
-->
<div id="app"></div>

导入包：

import React from "react"
import ReactDOM from "react-dom"

创建虚拟 DOM 元素：

// 这是 创建虚拟DOM元素的 API    <h1 title="啊，五环" id="myh1">你比四环多一环</h1>
//  第一个参数： 字符串类型的参数，表示要创建的标签的名称
//  第二个参数：对象类型的参数， 表示 创建的元素的属性节点
//  第三个参数： 子节点
const myh1 = React.createElement(
  "h1",
  { title: "啊，五环", id: "myh1" },
  "你比四环多一环"
)

渲染：

// 3. 渲染虚拟DOM元素
// 参数1： 表示要渲染的虚拟DOM对象
// 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
ReactDOM.render(myh1, document.getElementById("app"))

8. JSX 语法

什么是 JSX 语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比 HTML 严谨很多）

如何启用 jsx 语法？
- 安装 babel 插件
  - 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  - 运行cnpm i babel-preset-env babel-preset-stage-0 -D
- 安装能够识别转换 jsx 语法的包 babel-preset-react
  - 运行cnpm i babel-preset-react -D
- 添加 .babelrc 配置文件
```
{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}
```
- 添加 babel-loader 配置项：
```
module: {
  //要打包的第三方模块
  rules: [
    { test: /\.js|jsx$/, use: "babel-loader", exclude: /node_modules/ }
  ]
}
```
jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的；
在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS 代码写到 { } 中
- 渲染数字
- 渲染字符串
- 渲染布尔值
- 为属性绑定值
- 渲染 jsx 元素
- 渲染 jsx 元素数组
- 将普通字符串数组，转为 jsx 数组并渲染到页面上【两种方案】
在 jsx 中写注释：推荐使用{ /* 这是注释 */ }
为 jsx 中的元素添加 class 类名：需要使用className 来替代 class；htmlFor替换 label 的for属性
在 JSX 创建 DOM 的时候，所有的节点，必须有唯一的根元素进行包裹；
在 jsx 语法中，标签必须成对出现，如果是单标签，则必须自闭和！

当编译引擎，在编译 JSX 代码的时候，如果遇到了<那么就把它当作 HTML 代码去编译，如果遇到了 {} 就把花括号内部的代码当作普通 JS 代码去编译；

9. React 中创建组件

第 1 种 - 创建组件的方式

使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；

必须要向外 return 一个合法的 JSX 创建的虚拟 DOM；

创建组件：

function Hello() {
  // return null
  return <div>Hello 组件</div>
}

为组件传递数据：

// 使用组件并 为组件传递 props 数据
;<Hello name={dog.name} age={dog.age} gender={dog.gender} />

// 在构造函数中，使用 props 形参，接收外界 传递过来的数据
function Hello(props) {
  // props.name = 'zs'
  console.log(props)
  // 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；

  return (
    <div>
      这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}
    </div>
  )
}

父组件向子组件传递数据
使用{...obj}属性扩散传递数据
将组件封装到单独的文件中
注意：组件的名称首字母必须是大写

在导入组件的时候，如何省略组件的.jsx后缀名：

// 打开 webpack.config.js ，并在导出的配置对象中，新增 如下节点：
resolve: {
    extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
    alias: {
        '@': path.join(__dirname, './src')
    }
  }

在导入组件的时候，配置和使用@路径符号

第 2 种 - 创建组件的方式

使用 class 关键字来创建组件

ES6 中 class 关键字，是实现面向对象编程的新形式；

了解 ES6 中 class 关键字的使用

class 中 constructor 的基本使用
实例属性和实例方法
静态属性和静态方法
使用 extends 关键字实现继承

基于 class 关键字创建组件

最基本的组件结构：

//如果要使用class定义组件，必须让自己的组件，继承自React.Component
class 组件名称 extends React.Component {
  //在组件内部，必须有render函数，作用：渲染当前组件对应的虚拟DOM结构
  render() {
    //render函数中，必须返回合法的JSX虚拟DOM结构，render函数也算是class这个类中的实例方法
    //在class关键字创建的组件中，如果使用外界传递过来的 props 参数，不需接收，直接通过 this.props.**** 访问即可
    //注意：在class组件内部，this表示当前组件的实例对象
    return <div>这是 class 创建的组件 -- {this.props.name}</div>
  }
}

10. 两种创建组件方式的对比

注意：使用 class 关键字创建的组件，有自己的私有数据和生命周期函数；
注意：但是使用 function 创建的组件，只有 props，没有自己的私有数据和生命周期函数；

用构造函数创建出来的组件：叫做“无状态组件”
用class 关键字创建出来的组件：叫做“有状态组件”
- this.state = {} 相当于 Vue 中的 date(){ return { } }，是这个组件中的私有数据，并且可以可读可写。
什么情况下使用有状态组件？什么情况下使用无状态组件？

如果一个组件需要有自己的私有数据，则推荐使用：class 创建的有状态组件
如果一个组件不需要私有的数据，则推荐使用：无状态组件
react 官方说：无状态组件，由于没有自己的 state 和声明周期函数，所以运行效率会比有状态组件稍微高一些

有状态组件和无状态组件之间的本质区别就是：有无 state 属性、和有无生命周期函数

组件中的 props 和 state/data 之间的区别

props 中的数据都是外界传递过来的
state/data 中的数据，都是组件私有的；（通过 Ajax 获取回来的数据，一般都是私有数据）
props 中的数据都是只读的，不能重新赋值；
state/data 中的数据，都是可读可写的；

11. 一个小案例，巩固有状态组件和无状态组件的使用

通过 for 循环生成多个组件

数据：

CommentList: [
  { id: 1, user: "张三", content: "哈哈，沙发" },
  { id: 2, user: "李四", content: "哈哈，板凳" },
  { id: 3, user: "王五", content: "哈哈，凉席" },
  { id: 4, user: "赵六", content: "哈哈，砖头" },
  { id: 5, user: "田七", content: "哈哈，楼下山炮" }
]

设置样式

使用普通的 style 样式

<h1 style={{ color: "red", fontWeight: 200 }} />

启用 css-modules
1. 修改 webpack.config.js这个配置文件，为 css-loader 添加参数：
```
{ test: /\.css$/, use: ['style-loader', 'css-loader?modules'] } // 为 .css 后缀名的样式表  启用 CSS 模块化
```
2. 在需要的组件中，import导入样式表，并接收模块化的 CSS 样式对象：
```
import cssObj from "../css/CmtList.css"
```
3. 在需要的 HTML 标签上，使用className指定模块化的样式：
```
<h1 className={cssObj.title}>评论列表组件</h1>
```
使用localIdentName自定义生成的类名格式，可选的参数有：
- [path] 表示样式表 相对于项目根目录 所在路径
- [name] 表示样式表文件名称
- [local] 表示样式的类名定义名称
- [hash:length] 表示 32 位的 hash 值
- 例子：{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }
使用 :local() 和 :global()
- :local()包裹的类名，是被模块化的类名，只能通过className={cssObj.类名}来使用
  
  同时，:local默认可以不写，这样，默认在样式表中定义的类名，都是被模块化的类名；
- :global()包裹的类名，是全局生效的，不会被 css-modules 控制，定义的类名是什么，就是使用定义的类名className="类名"
注意：只有.title这样的类样式选择器，才会被模块化控制，类似于body这样的标签选择器，不会被模块化控制；

在项目中启用模块化并同时使用 bootstrap

把自己的样式表，定义为 .scss 文件
第三方的样式表，还是以 .css 结尾
我们只需要为自己的 .scss 文件，启用模块化即可；
运行cnpm i sass-loader node-sass -D 安装能够解析scss文件的 loader

添加 loader 规则：

{
  "test": /\.scss$/,
  "use": [
    "style-loader",
    "css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]",
    "sass-loader"
  ]
} // 打包处理 scss 文件的 loader

12. React 中绑定事件的注意点

事件的名称都是 React 的提供的，因此名称的首字母必须大写onClick、onMouseOver
为事件提供的处理函数，必须是如下格式
```
onClick= { function }
```

用的最多的事件绑定形式为：

;<button onClick={() => this.show("传参")}>按钮</button>

// 事件的处理函数，需要定义为 一个箭头函数，然后赋值给 函数名称
show = arg1 => {
  console.log("show方法" + arg1)
}

在 React 中，如果想要修改 state 中的数据，使用 this.setState({ })
- 在setState({ })中，只会把对应的 state 状态更新，而不会覆盖其它的 state 状态。
- this.setState({ })方法是异步的，所以如果想拿到最新的值，需要在它自带的回调函数里面拿到值。即：this.setState({ },callback

13. 绑定文本框与state中的值（单向数据流）

在 Vue 中，默认提供了v-model指令，可以很方便的实现 数据的双向绑定；
但是，在 React 中，默认只是单向数据流，也就是只能把 state 上的数据绑定到页面，无法把页面中数据的变化，自动同步回 state ；如果需要把页面上数据的变化，保存到 state，则需要程序员手动监听onChange事件，拿到最新的数据，手动调用this.setState({ }) 更改回去；

案例：

<input type="text" style={{ width: '100%' }} value={this.state.msg} onChange={() => this.textChanged()} ref="mytxt" />

 // 响应 文本框 内容改变的处理函数
  textChanged = () => {
    // console.log(this);
    // console.log(this.refs.mytxt.value);
    this.setState({
      msg: this.refs.mytxt.value
    })
  }

14. 使用ref获取DOM元素引用

和 Vue 中差不多，vue 为页面上的元素提供了 ref 的属性，如果想要获取元素引用，则需要使用this.$refs.引用名称

在 React 中，也有 ref, 如果要获取元素的引用this.refs.引用名称

15. React 生命周期函数

getDefaultProps
- 作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
getInitialState
- 作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props
componentWillMount
- 在完成首次渲染之前调用，此时仍可以修改组件的state
render 必选的方法，创建虚拟DOM，该方法具有特殊的规则：
- 只能通过this.props和this.state访问数据
- 可以返回null、false或任何react组件
- 只能出现一个顶级组件（不能返回数据）
- 不能改变组件的状态
- 不能修改DOM的输出
componentDidMount 真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
componentWillReceiveProps （参数：nextProps）组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件的props及state
```
componentWillReceiveProps(nextProps){
  if(nextProps.bool){
    this.setState({
      bool.true
    })
  }
}
```
shouldComponentUpdate （参数：nextProps,nextState）
组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法（及时数据进行的新的变化，也不会进行渲染），通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
在首次渲染期间（只有触发了props或state更新才会调用）或者调用了forceUpdate方法后，该方法不会被调用。
componentWillUpdate （参数：nextProps,nextState）
接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。
componentDidUpdate （参数：prevProps,prevState）
ß完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。
componentWillUnmount
组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

React常用插件：

react-document-title：媒体查询，响应式组件
react-document-title：设置页面浏览器标题
react-d3-cloud：词云

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react学习.md

react学习.md

1. React 简介

2. 前端三大主流框架

3. React 与 Vue 的对比

组件化方面

开发团队方面

社区方面

移动 APP 开发体验方面

4. 为什么要学习 React

5. React 中几个核心的概念

虚拟 DOM（Virtual Document Object Model）

Diff 算法

6. 创建基本的 webpack4.x 项目

7. 在项目中使用 react

8. JSX 语法

9. React 中创建组件

第 1 种 - 创建组件的方式

第 2 种 - 创建组件的方式

了解 ES6 中 class 关键字的使用

基于 class 关键字创建组件

10. 两种创建组件方式的对比

11. 一个小案例，巩固有状态组件和无状态组件的使用

通过 for 循环生成多个组件

设置样式

在项目中启用模块化并同时使用 bootstrap

12. React 中绑定事件的注意点

13. 绑定文本框与state中的值（单向数据流）

14. 使用ref获取DOM元素引用

15. React 生命周期函数

React常用插件：

Files

react学习.md

Latest commit

History

react学习.md

File metadata and controls

1. React 简介

2. 前端三大主流框架

3. React 与 Vue 的对比

组件化方面

开发团队方面

社区方面

移动 APP 开发体验方面

4. 为什么要学习 React

5. React 中几个核心的概念

虚拟 DOM（Virtual Document Object Model）

Diff 算法

6. 创建基本的 webpack4.x 项目

7. 在项目中使用 react

8. JSX 语法

9. React 中创建组件

第 1 种 - 创建组件的方式

第 2 种 - 创建组件的方式

了解 ES6 中 class 关键字的使用

基于 class 关键字创建组件

10. 两种创建组件方式的对比

11. 一个小案例，巩固有状态组件和无状态组件的使用

通过 for 循环生成多个组件

设置样式

在项目中启用模块化并同时使用 bootstrap

12. React 中绑定事件的注意点

13. 绑定文本框与state中的值（单向数据流）

14. 使用ref获取DOM元素引用

15. React 生命周期函数

React常用插件：