简单即是美

React实战系列-网易音乐<1>

发表于 更新于 分类于 阅读次数： 本文字数： 5.7k

声明
本系列参考React Hooks 与 Immutable 数据流实战完成，每一章节都将整合：遇到的问题、个人思考、知识点汇总等。
在原有代码之上进行了修改。

目标

  1. 本系列目标

    1. 熟悉前端开发流程

    2. 熟练掌握一种框架目录结构，熟练使用 React+Router+Redux 相关插件

    3. 掌握Redux数据流及其相关，如immer

    4. 不打算掌握布局相关，因为实例不允许。。。

  2. 本文目标

    1. 构建项目、目录结构划分

    2. router-config配置、react-thunk基本使用

    3. 、PureComponent+memo+Component相关

    4. 接入redux、immer使用

第一部分 初始化

代码会放在github上，以不同的分支来区分。

该部分不属于重点

构建项目以及目录结构

采用Create React App进行构建。

npx create-react-app my-app
cd my-app
npm start

整理目录结构如下：

├─api                   // 网路请求代码、工具类函数和相关配置
├─application           // 项目核心功能
│   └── Singers         // 其中一个实例
│       ├── index.js    // 该路由入口文件
│       ├── store       // 存储相关
│       │   ├── actionCreators.js   // action 获取数据相关
│       │   ├── constants.js    // 常量
│       │   ├── index.js    // 导出配置
│       │   └── reducer.js  // reduer 接受action请求，整合数据，触发更新UI
│       └── style.js
├─assets                // 字体配置及全局样式
├─baseUI                // 基础 UI 轮子
├─components            // 可复用的 UI 组件
├─routes                // 路由配置文件
└─store                 // redux 相关文件
  App.js                // 根组件
  index.js              // 入口文件
  serviceWorker.js      // PWA 离线应用配置
  style.js              // 默认样式

该部分主要是采用了独立文件夹的方式存放文件、目录作用域划分等操作。属于习惯问题。

第二部分 让框架跑起来

该项目包含react+router+redux+dom等主要模块的引用，故，如何安排相应的模块以及配置是个问题。

router-config

首先配置路由，在浏览器中可以见到不同的URL对应不同的页面，在此主要贴代码。


// App.js
// 第一步，引用配置
import { renderRoutes } from 'react-router-config';
function App() {
    return (
        <Provider store={store}>
            <HashRouter>
                {renderRoutes(routes)}
            </HashRouter>
        </Provider>
    );
}

react-router-config究竟做了什么？

// !源码
import React from "react";
import { Switch, Route } from "react-router";

function renderRoutes(routes, extraProps = {}, switchProps = {}) {
  return routes ? (
    <Switch {...switchProps}>
// !主要是这句！
      {routes.map((route, i) => (
        <Route
          key={route.key || i}
          path={route.path}
          exact={route.exact}
          strict={route.strict}
          render={props =>
            route.render ? (
              route.render({ ...props, ...extraProps, route: route })
            ) : (
              <route.component {...props} {...extraProps} route={route} />
            )
          }
        />
      ))}
    </Switch>
  ) : null;
}

export default renderRoutes;

实例

// 实例
// renderRoutes 这个方法只渲染一层路由, 需要在【父】【component】中加 {renderRoutes(routes)}
const routes = [
    { path: '/', exact: true, render: () => <Redirect to={'/page1'} /> },
    { path: '/page1', component: Page1 },
    {
        path: '/page2',
        component: Page2,
        routes: [
            {
                path: '/page2/child',
                component: Child,
            },
        ],
    },
];

function App() {
    return (
        <HashRouter>
            <div className="App">
                <h1>Hello</h1>
                {renderRoutes(routes)}
            </div>
        </HashRouter>
    );
}

注意事项

  1. renderRoutes只渲染一层，故包含子路由的需要，需要在【父】【component】中加 {renderRoutes(routes)}

  2. 哈希路由 #, 是否重新获取资源？

Component VS PureComponent VS memo

整个部分涉及React优化性能内容

React核心开发团队一直都努力地让React变得更快。在React中可以用来优化组件性能的方法大概有以下几种:

  1. 组件懒加载(React.lazy(…)和 )
  2. PureComponent
  3. shouldComponentUpdate(…){…} 生命周期函数
  4. React.memo()

Component VS PureComponent

  1. 默认Component遇到state Props 变化时，父子组件都更新。
  2. Component通过shouldComponentUpdate生命周期函数进行判断是否更新组件；
  3. PureComponent组件没有shouldComponentUpdate生命周期函数，组件内部自动判断时候需要更新。
if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

React源码中很容易看到：shadowEqual只会”浅”检查组件的props和state，这就意味着嵌套对象和数组是不会被比较的。

PureComponent适合用于5展示的组件。

PureComponent VS memo

函数组件没有state、shouldComponentUpdate，故无法采用 生命周期｜｜自动浅比较的方式。

React v16.6 引入 React.memo()


// !需求》：现在有一个显示时间的组件,每一秒都会重新渲染一次
// ?对于Child组件我们肯定不希望也跟着渲染，所有需要用到PureComponent || React.momo()

// Parent
import React  from 'react';

export default class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            date : new Date()
        }
    }
    componentDidMount(){
        setInterval(()=>{
            this.setState({
                date:new Date()
            })
        },1000)
    }
    render(){
        return (
            <div>
                <Child seconds={1}/>
                <div>{this.state.date.toString()}</div>
            </div>
        )
    }
}
// Child
function Child({seconds}){
    console.log('I am rendering');
    return (
        <div>I am update every {seconds} seconds</div>
    )
};

/**
 *
 *
 * @param {*} prevProps 组件将会接收的下一个参数props
 * @param {*} nextProps 组件的下一个状态state 
 * @returns
 */
function areEqual(prevProps, nextProps) {
    if (prevProps.seconds === nextProps.seconds) {
        return true;
    } else {
        return false;
    }
}

// 第一个参数为纯函数的组件，
// 第二个参数用于对比props控制是否刷新，
//      与shouldComponentUpdate()功能类似。

export default React.memo(Child, areEqual);
/* -------- React.memo ----------- */

PureComponent 🆚 VS 🆚 memo

  • React.PureComponent是银
  • React.memo(…)是金
  • React.PureComponent是给ES6的类组件使用的
  • React.memo(…)是给函数组件使用的
  • React.PureComponent减少ES6的类组件的无用渲染
  • React.memo(…)减少函数组件的无用渲染

redux-devtools-extension 调试工具

redux-devtools-extension 官网

redux-devtools-extension

使用说明
图片来源：https://blog.csdn.net/achenyuan/article/details/80884895

第三部分 数据链路

redux在之前的文章中已经有过学习，包含了主要的步骤以及概念。可以参考前几天的—-React系列-Redux<2>。

可以参考下册两个图，加以回忆。

流程

代码主要步骤

按照之前的理解就可以直接上手，初始化
action -> dispatch -> reducer => new state => update UI.

其中有个问题，如何 高效 的处理state事关 性能优劣。前一节，对

react & redux & react-redux

三者之间的关系可以看下册官方说明

  1. React：负责组件的UI界面渲染；
  2. Redux：数据处理中心； redux 官网
  3. React-Redux：连接组件和数据中心，也就是把React和Redux联系起来。 react-redux 官网

回顾下react生命周期

redex核心

React-Redux

Redux 本身和React没有关系，只是数据处理中心，是React-Redux让他们联系在一起。

React-Redux提供两个方法：

  1. connect: connect连接React组件和Redux store。connect实际上是一个高阶函数，返回一个新的已与Redux store连接的容器组件。

  2. Provider: 实现store的全局可访问，将store传给每个组件。原理：使用React的context，context可以实现跨组件之间的传递。

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

复制代码TodoList是 UI 组件，VisibleTodoList就是由 react-redux 通过connect方法自动生成的容器组件。

  1. mapStateToProps：从Redux状态树中提取需要的部分作为props传递给当前的组件。
  2. mapDispatchToProps：将需要绑定的响应事件（action）作为props传递到组件上。

connent

三者之间的关系

关系

redux-thunk

redux-thunk
With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extend the store’s abilities, and let you write async logic that interacts with the store.

Thunks are the recommended middleware for basic Redux side effects logic, including complex synchronous logic that needs access to the store, and simple async logic like AJAX requests.

学习 https://zhuanlan.zhihu.com/p/85403048

第四部分 注意事项⚠️

函数组件mapStateToProps拿到的数据是整个state
普通组件mapStateToProps拿到的数据是createRouter()中的reducer导出的默认值。