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