React 学习

1. react 学习前的前置条件

在学习 react 之前首先需要熟悉 class 用作用和用法。

2. 学习 class

Class 的作用就是创建构造函数，在 ES5 中我们使用大写字母开头的函数作为构造函数，使用 new 关键字创建它的实例。在拥有class 关键字之后，我们就可以直接使用 class 来定义所有的构造函数及其方法，并使用 new 关键字创造实例。
与 ES5中一致，类的 constructor 方法直指类本身。
在 class 内部的方法就等同于 ES5 中使用 prototype 创建构造函数的原型函数。
我们可以使用 Object.assign 一次性为类创建多个方法。
与 ES5 中不一致的是，class 类必须使用 new 调用。

3. 通过 webpack 搭建开发 react 的开发环境

主要分为一下几个步骤，首先在项目中使用yarn安装react 和 react-dom ，接下来在项目中使用yarn安装babel 、@babel-preset-react 和@babel/preset-env。接着分别在webpack.config.js和.babellrc中进行配置。

4. react 的核心

react是以数据为驱动的单向数据流，同时也是组件化编程。react通过jsx实现组件化编程，接着通过虚拟 DOM进行展示。

5. 通过 manifest实现离线网页

6. JSX

JSX是react所支持的语法，用于在JS中嵌入HTML代码。
在JSX中写代码，所有标签必须闭合、最外层只能有一个元素包裹，并且在使用表达式时必须使用{}。

7. 组件

组件的书写可以分为两种，一种是函数组件，还有一种是使用class声明的组件。
使用组件的时候，第一种方法是我们通过使用props对其进行传参，组件内部不能修改；第二种方法是使用 state，这种方式的数据是私有的，完全受控于组件。需要注意的是，函数式组件只能使用props方式，而class组件两种方式都可以使用。

8. 事件处理

当为组件绑定事件处理函数的时候，所创建的函数必须使用驼峰命名法，并且修改函数的 this 指向问题。
修改 this 指向有三种方法，第一种方法是使用 bind 进行修改；第二种方法是在调用时使用 this.xxx（）；第三种方法是在调用时使用箭头函数。

9. 组件生命周期

必须要明确一点，组件生命周期函数只存在于 class 声明的组件中。
生命周期函数gitInitialState，用于在 state 初始化。
getDefaultProps 用于props默认值。
componentWillMount组件即将挂载，它在生命周期时只会被调用一次，可用于做一些组件内部初始化工作。
componentDidMount组件挂载完毕，在render之后调用，在这个阶段 DOM 已经可以使用。
shouldComponentUpdate决定组件是否需要重新渲染。
componentWillUpdate组件即将更新。
componentDidUpdate组件更新完毕。
componentWillUnmount组件即将被销毁，可用于清除计时器等收尾操作。

10. react 路由

使用react-router进行路由处理。首先安装react-router-dom，在代码中引入 react-router-dom。
嵌套路由
动态路由
带权限的路由

11. react类型检测

12. redux状态管理器

状态管理redux。
在使用redux时，我们所遵循的原则是单向数据流原则；state是只读属性，我们只能使用纯函数对其进行修改。

12.1 安装redux

使用npm i redux -S或yarn add redux进行安装。

12.2 redux四大概念

四大概念分别是store、state、action、reducer。

12.2.1 store

一个应用中只能有一个store，store是一个对象，用于存放整个应用的state。

import { createStore } from 'redux'
const store = createStore(reducer)

12.2.2 state

state是整个应用当前的数据，可以通过store.getState进行获取。

12.2.3 action

action是描述事件发生的对象。必须设置type属性表示要去执行的动作。

const action = {
  type: 'ADD_TODO',  //  事件类型
  payload: 'learn redux'   // 该 action 所携带的数据
}

定义好事件类型之后，使用store.dispatch()触发事件。

12.2.4 reducer

reducer是描述该怎么更新state的函数。reducer接受两个参数，第一个参数是初始化的state，第二个参数是action。

function reducer(state="javascript", action) {
  switch(action.type) {
    case: 'HTML': 
      return 'this is html'
      break
    case: 'javascript':
      return 'this is javascript'
      break
    default: 
      return state
  }
}

12. react-redux

使用yarn add react-redux进行安装。
react-redux可以使组件通过 this.props的方式获取store中的state。
在react-redux中组件分为两类，分别是UI组件和容器组件。
在这两种组件中，有两个组件非常重要，分别是Provider组件和connect组件，Provider组件作为react的顶层组件，接受store作为props，所有自组件通过props获取数据。connect组件使UI组件升级为容器组件。