前端框架-react

# react

版本

- node v10.16.0 <https://mirrors.huaweicloud.com/nodejs/v10.16.0/node-v10.16.0-x64.msi> <https://nodejs.org/dist/v10.16.0/node-v10.16.0-x64.msi>
- npm 6.9.0
- npx 6.9.0

`npm install -g cnpm --registry=https://registry.npmmirror.com`

## react预习课程

### 入门
- cra （掌握create-react-app使用）

```
npx create-react-app my-app
cd my-app
npm start
npm run eject
```

<https://reactjs.org/>
<https://zh-hans.reactjs.org>
<https://facebook.github.io/create-react-app/docs/getting-started>

React负责逻辑控制，数据 -> VDOM
ReactDom渲染实际DOM，VDOM -> DOM
React使⽤用JSX来描述UI
babel-loader把JSX 编译成相应的 JS 对象，React.createElement再把这个JS对象构造成React需
要的虚拟dom。

### 语法

### 组件
组件有两种形式：class组件和function组件。

- class组件通常拥有状态和生命周期，继承于Component，实现render方法。
- 函数组件通常无状态，仅关注内容展示，返回渲染结果即可。(从React16.8开始引入了hooks，函数组件也能够拥有状态。)

state
### 正确使用setState
- 不要直接修改state
  - this.state.comment = 'Hello'; // 错误示范
  - this.setState({comment: 'Hello'}); // 正确使用

### 生命周期 <https://zh-hans.reactjs.org/docs/react-component.html#the-component-lifecycle>

#### 挂载时的生命周期
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()

cnpm i -g yarn

### redux
- 什么时候需要用到redux
- redux的基本使用

### react-redux