react项目搭建（基础学习笔记）

react项目搭建（基础学习）

安装

局部安装

1、npm init -y或yarn init -y初始化项目

2、全局安装creact-react-app。使用npm install -D create-react-app或yarn add -D create-react-app。使用npx create-react-app --version查看安装的版本号。

3、本地创建项目npx create-react-app react-demo1（react-demo1是项目名）

4、初始化项目生成的node_modules和package.json可以删除掉。

全局安装

1、npm i -g create-react-app或yarn add -g create-react-app。使用create-react-app --version查看版本号。

2、create-react-app react-demo1创建项目。

项目结构

• public 静态文件

  — index.html项目入口文件

  — manifest.json缓存文件。就算没有网，离线也能打开项目

  — robots.txt给搜索引擎看的

• src

  — index.js项目打包入口

  — reportWebVitals.js前端性能检测工具

  — setupTest.js做单元测试的

删除无用文件

public文件夹中只保留index.html和favicon.ico

src中只保留index.js

删完之后注意其他地方有引用这些文件的，解决报错

index.js中React.StrictMode标签主要是用来做静态检查的，可以删掉

webpack配置

react中将webpack配置隐藏了 ，将他封装进了react-scripts中。

要将这些文件暴露出来，使用命令npm run eject或yarn eject。执行后会多两个文件夹config和scripts。注意此操作慎用！因为不可逆！它会复制所有依赖文件和相关依赖，比如babel、webpack到项目里面。

插件安装

1、vscode上安装插件ES7+ React/Redux/React-Native snippets，使用rce+tab键快速生成class模板。

2、项目里面安装prop-types类型校验。使用yarn add -D prop-types。

使用语法：组件名.propTypes添加一个属性，属性值为对象。

```javascript
// 使用语法： 组件名.propTypes添加一个属性，属性值为对象
Son.propTypes = {
  name: PropTypes.string.isRequired, // isRequired代表必传
  msg: PropTypes.string
}

// 如果需要制定默认值
Son.defaultProps = {
  name: 'wo',
  msg: '是一个未来的前端大佬'
}

组件传值

1、props

适用于父子组件传值。父组件在子组件上将值传过去，子组件通过this.props接收。

子组件想要改变父组件的值不通过子组件直接修改，而是通过事件来触发父组件改值的方法。

2、context

适用于祖孙组件间、兄弟组件间传值

先定义一个context文件

import React from "react";

const MainContext = React.createContext()

export default MainContext

在需要传值和接收值的地方都引入context文件

• 在函数式组件中传递值使用context的provider方法，将要传值的组件包裹起来，接收值用consumer方法。

render() {
    let { obj } = this.state
    return (
      <div>
        <MainContext.Provider value={obj}>
          Main
          <Hello/>
        </MainContext.Provider>
      </div>
    )
  }

return (
      // 函数式组件中比较推荐使用consumer进行取值消费
      <MainContext.Consumer>
        {
          context => {
            return (
              <div>World Page---{context.id}---{context.name}</div>
            )
          }
        }
      </MainContext.Consumer>
    )

• 在class组件中不需要使用consumer接收而是定义class的静态方法。static contextType = MainContext，直接使用this.context取值。

3、eventBus

• 需要安装 yarn add -D events

• 新建event.js文件，引入事件总线，利用这个对象发射和监听事件，这个对象是全局的

  import { EventEmitter } from "events";
  
  const eventBus = new EventEmitter()
  
  export default eventBus
  

• 在需要发送的页面引入eventBus。使用emit发送；需要接收的页面引入eventBus，使用addListener监听。

  发送事件eventBus.emit(‘事件名’， 参数1， 参数2，…)，接收事件eventBus.addListener(‘事件名’， 接收的事件)。注意在componentWillUnmount生命周期里面使用eventBus.removeListener(‘事件名’，接收的事件)移除监听。

生命周期

1、初始化阶段，可以拿到props和state

2、componentWillMount组件加载前。已经逐渐被淘汰掉了，想用的话UNSAFE_componentWillMount这样控制台不会报错。在此生命周期DOM未渲染，只会在render之前调用，适合发请求。还可以在这里调用setState改变状态，并且不会额外导致调用一次render

3、render组件渲染。只要状态发生变化，一定会执行render方法。render函数会插入jsx生成的DOM结构，react会生成一个虚拟DOM树，在每一次组件更新的时候，react会通过其diff算法比较新旧DOM，找到最小的差异DOM进行渲染

4、componentDidMount在这里发请求也可以，此时DOM节点已经生成，只在挂在完成之后调用一次。这里可以获取DOM节点

5、state状态改变触发shouldComponentUpdate，需要return true或false。如果是true代表需要更新，会再次触发3中的render。实际业务开发中一般不用这个来控制组件不更新。

6、UNSAFE_componentWillUpdate组件将要更新，有两个参数nextProps和nextState，拿到的是更新之后的数据

7、componentDidUpdate更新之后，也有两个参数prevProps和prevState，拿到的是更新之前的数据

8、componentWillUnmount卸载的生命周期。怎么触发：通过父组件写三元表达式控制组件是否渲染。这里主要完成组件的卸载和数据的销毁，清除setTimeout，setInterval，移除事件监听

父组件state状态改变时子组件重复render问题

1、在每个子组件中使用shouldComponentUpdate阻止更新，但是这个方法不更新

shouldComponentUpdate(nextProps, nextState) {
    if(this.props.num !== nextProps.num) { // 当父组件的num更改时不更新子组件
      return true
    }
    return false
  }

2、在定义class组件时将component换为PureComponent，其实它的效果和shouldComponentUpdate一样。它通过props和state的浅比较，浅比较是react源码中的一个内置函数，当组件的props和state发生变化的时候就不会更新。它只是在一些纯展示的组件上用

class Footer extends PureComponent

关于setState

1、react中为什么要用setState？

因为react中没有像vue2的object.defineProperty或vue3的proxy来监听数据的变化，所以必须通过setState来告知react数据状态的变化。setState继承自component，当调用setState的时候会重新执行render方法

2、setState是异步的吗？

• 在生命周期是异步的

• 在合成事件中是异步的（合成事件：react中包装过的原生事件，如onClick、onChange）

• 理论来讲执行代码的过程是同步的，因为合成事件和生命周期中，调用顺序是在更新之前的，所以导致我们没有办法立即拿到更新后的值，所以才形成的所谓的异步现象。这里说的异步并不是指setState内部是由异步代码实现的

• 在setTimeout里面setState是同步的，setTimeout是宏任务

• 在原生事件（如通过documen.querySelector(‘btn’).addEventListener(‘click’, () => this.click())来定义的事件里面setState是同步的并不是指setState内部是由异步代码实现的

• 在setTimeout里面setState是同步的，setTimeout是宏任务

• 在原生事件（如通过documen.querySelector(‘btn’).addEventListener(‘click’, () => this.click())来定义的事件里面setState是同步的

redux

1、定义：它是一个类似于vuex的js的状态管理工具。并不是只有react里面可以用，在vue里面也可以用。体积较小，只有2kb左右。不建议在小项目里面使用，一般如果页面大于一百个且涉及到比较复杂的传值情况推荐使用。
2、安装npm i redux -D
3、使用 reducer是一个纯函数，即函数的返回结果只依赖于它的参数，并且在函数的执行过程中没有副作用。