从0 学习 react刚开始学习内容会逐渐完善 1、创建 react 1.1 这是js的 react项目创建方式 1.

刚开始学习内容会逐渐完善

1、创建 react

1.1 这是js的 react项目创建方式

npx create-react-app react-app

1.2 这是ts的react项目创建方式

npx create-react-app my-app --template typescript

// 如果使用这种创建方式 就需要安装相关的 库

npm i react react-dom react-redux typescript --save

安装@types声明库
npm i @types/react @types/react-dom @types/react-redux --save-dev

启动后，可以通过以下地址访问项目： http://localhost:3000/

    ├─ /node_modules
    ├─ /public
    |  ├─ favicon.ico
    |  ├─ index.html
-   |  ├─ logo192.png
-   |  ├─ logo512.png
-   |  ├─ mainfest.json
-   |  └─ robots.txt
    ├─ /src
-   |  ├─ App.css
    |  ├─ App.js
-   |  ├─ App.test.js      
-   |  ├─ index.css
    |  ├─ index.js
-   |  ├─ logo.svg
-   |  ├─ reportWebVitals.js
-   |  └─ setupTests.js
    ├─ .gitignore
    ├─ package.json
    ├─ README.md

2 接下来，删除一般项目中用不到的文件，最简化项目。

    ├─ /node_modules
    ├─ /public
    |  ├─ favicon.ico
    |  └─ index.html
    ├─ /src
    |  ├─ App.js
    |  └─ index.js
    ├─ .gitignore
    ├─ package.json
    ├─ README.md
    └─ yarn.lock

这样清洁多了方便我们后面的修改，但是这样会有很多报错，因为删除许多文件

3 逐个修改以下文件：

src/App.js：

function App() {
    return <div className="App">React-App</div>
}

export default App

src/index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

public/index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

4 react生命周期

4.1初始化阶段

4.1.1 设置组件的默认属性

static defaultProps = {
    name: 'start',
    age:23
};
//or
Counter.defaltProps={name:'start'}

4.1.2、设置组件的初始化状态

constructor() {
    super();
    this.state = {number: 0}
}

4.1.3、componentWillMount()

组件即将被渲染到页面之前触发，此时可以进行开启定时器、向服务器发送请求等操作

4.1.4、render()

渲染组件

4.1.5、componentDidMount()

组件已经被渲染到页面中后触发：此时页面中有了真正的DOM的元素，可以进行DOM相关的操作
(DOM挂在后执行)

4.2、运行中阶段

4.2.1 componentWillReceiveProps()

组件接收到属性时触发

4.2.2 shouldComponentUpdate()

当组件接收到新属性，或者组件的状态发生改变时触发。组件首次渲染时并不会触发

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。

一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染
无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑在shouldComponentUpdate()中加入条件判断，从而优化性能

例如React中的就提供了一个`PureComponent`的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，
从而决定组件是否更新。值得注意的是，`PureComponent`进行的是浅比较，所以组件状态或属性改变时，
都需要返回一个新的对象或数组

4.2.3、componentWillUpdate()

组件被更新完成后触发。页面中产生了新的DOM的元素，可以进行DOM操作

4.3、销毁阶段

4.3.1 componentWillUnmount()

组件被销毁时触发。这里我们可以进行一些清理操作，例如清理定时器，取消Redux的订阅事件等等。

从0 学习 react

刚开始学习 内容会逐渐完善