react简结 ​

• react-cli项目构建
• react项目结构
• react指令
• typescript组件
• react生命周期
• react数据绑定原理
• 请求后台资源
• 父子组件通信props
• 跨级组件通信
• 非嵌套组件间通信
• react路由
• react路由守卫
• 页面传参与获取
• redux
• 使用cookie
• react组件实例ref
• 单元测试
• fiber与虚拟dom
• 高阶组件
• hook
• react和vue的区别
• Fragments
• 插槽
• 分析器
• setState
• react源码简述
• 点击外部元素
• react性能优化
• 错误边界
• jsx到javascript的转换过程
• react源码api
• Mobx
• Immutable
• react-thunk
• redux-saga
• React.createClass和extendsComponent的区别
• React声明组件
• React-Intl
• redux-persist
• react严格模式

react-cli项目构建 ​

1. 参考链接

   react创建项目

   react+ts 快速创建项目

   React ts 项目搭建

2. 详解

   • 创建项目

     npm install create-react-app -g

     create-react-app 项目名

     (或：npx create-react-app 项目名 --template typescript)

     cd 项目名

     npm install

     npm start

   • 其它依赖安装

     npm install react-router-dom react-redux redux antd node-sass sass-loader axios lodash whatwg-fetch es6-promise

     import正确即可用

react项目结构 ​

1. 参考链接

   从零开始一步一步搭建Typescript+React+Redux项目——创建项目结构（一）

2. 详解

   /src
       /assets
           /images
       /components
       /pages
       /redux
       /sass
       /test
       app、index等入口文件

typescript组件 ​

1. 参考链接

   react+typescript给state和props定义指定类型

   React + TypeScript 默认 Props 的处理

2. 详解

   typescript

   import * as React from 'react';
   
   type StateType = {
       hello: string;
   };
   type propType = {
       name: string;
   };
   interface Home {
       state: StateType;
       props: propType
   }
   
   class Home extends React.Component {
       static defaultProps = {
           name: "stranger",
       };
       constructor(props: propType) {
           super(props);
           this.state = {
               hello: 'hi'
           }
       }
   
       componentDidMount() {
           this.setState({
               hello: 'Hello'
           })
       }
   
       render() {
           return <div>{this.state.hello}, {this.props.name}</div>;
       }
   }
   
   export default Home;

react指令 ​

1. 参考链接

   与Vue相比React的指令是怎么使用？

   react文档

   React动态绑定className

   React的合成事件

   React事件处理和原生JS事件处理

   「2021」高频前端面试题汇总之React篇（上）

2. 详解

   • 数据绑定

     需要显示的变量要写在state中，并且通过setState修改，这样值变视图变

     不需要显示的变量，可写在constructor中this.??=??，也可以写在render中，这样值变视图不变

   • 条件判断

     javascript

     render(){
         let isExist = true;
         return (
             <div>
                 {isExist && <div className="box"></div>}
                 {isExist ? <div className="box"></div>:''}
             </div>
         )
     }
     function getGreeting(user) {
         if (user) {
             return <h1>Hello, {formatName(user)}!</h1>;
         }
         return <h1>Hello, Stranger.</h1>;
     }

   • 数据传值

     javascript

     render(){
         let value = 'hello world';
         let path = 'http://www.baidu.com';
         return (
             <div>
                 <p>{value}</p>
             </div>
             <div>
                 <h1 title={value}></h1>
                 <a href={path}>百度一下</a>
             </div>
         )
     }

   • class 与 style

     javascript

     render(){
         let isExist = true;
         let classValue1 = "a b c";
         let classValue2 ='b c ' + (isExist && 'a');
         let styleValue1 = {
             width: '100px',
             height: '100px',
             background: 'red'
         };
         return (
             <div>
                 <div className={classValue2}></div>
                 <div style={styleValue1}>box</div>
                 <div style={{width: '100px', height: '50px', background: 'yellow'}}>box</div>
             </div>
         )
     }

   • 动态class

     html

     <p className={[[title',this.state.addColor?'color':null].join(' ')}>标题</p>
     <p className={`title ${this.state.addColor?'color':null}`}>标题</p>

   • 显示与隐藏

     javascript

     render(){
         let isShow = false;
         return (
             <div>
                 <div className="box" style={{display: isShow?'':'none'}}></div>
             </div>
         )
     }

   • 循环

     javascript

     render(){
         let arr = [[a', 'b', 'c', 'd'];
         let obj = {
             a: 1,
             b: 2,
             c: 3
         }
         return (
             <div>
                 <ul>
                     {
                         arr.map((item, index)=>{
                             return <li key={index}>{item}----{index}</li>
                         })
                     }
                 </ul>
     
                 <ul>
                     {
                         (function(){
                             let newArr = [];
                             for(let key in obj){
                                 newArr.push(
                                     <li key={key}>{key}: {obj[key]}</li>
                                 );
                             }
                             return newArr;
                         })()
                     }
                 </ul>
                 
     
                 <ul>
                     {
                         Object.entries(obj).map(([key, value])=>{
                             return <li key={key}>{value}</li>
                         })
                     }
                 </ul>
             </div>
         )
     }

   • 事件绑定

     javascript

     constructor(){
         super();
         this.state = {
             message: 'hello world'
         }
     }
     render(){
         let value = 'hello react';
         return (
             <div>
                 <button onClick={(ev)=>{
                     console.log('按钮点击了1:', this.state.message);
                     console.log('按钮点击了1:', value);
                     console.log(ev);
                 }}>按钮1</button>
     
                 <button onClick={this.btnAction}>按钮2</button>
     
                 <button onClick={this.btnAction2.bind(this)}>按钮3</button>
     
                 <button onClick={this.btnAction3}>按钮4</button>
     
                 <button onClick={()=>this.btnAction4()}>按钮5</button>
             </div>
         )
     }
     btnAction(){
         console.log('按钮点击了2');
     }
     btnAction2(val1, val2, val3, ev){
         console.log('按钮点击了3: ', this.state.message);
         console.log('按钮点击了3: ', val1);
         console.log(ev);
     }
     btnAction3 = ()=>{
         console.log('按钮点击了4: ', this.state.message);
     }
     
     btnAction4(val, ev){
         console.log('按钮点击了5: ', this.state.message);
         console.log('按钮点击了5: ', val);
         console.log(ev);
     }

     ReactJS中的事件对象是React将原生事件对象(event)进行了跨浏览器包装过的合成事件(SyntheticEvent)

     • 合成事件做了两件事：

       1. 事件委派

          React会把所有的事件绑定到结构的最外层(document)，使用统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部事件监听和处理函数。

          这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。

       2. 自动绑定

          React组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件。

     • 合成事件的目的：

       1. 合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力；

       2. 对于原生浏览器事件来说，浏览器会给监听器创建一个事件对象。如果你有很多的事件监听，那么就需要分配很多的事件对象，造成高额的内存分配问题。但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，当事件需要被使用时，就会从池子中复用对象，事件回调结束后，就会销毁事件对象上的属性，从而便于下次复用事件对象。

     • React的事件和普通的HTML事件区别

       1. 对于事件名称命名方式，原生事件为全小写，react 事件采用小驼峰；
       2. 对于事件函数处理语法，原生事件为字符串，react 事件为函数；
       3. react 事件不能采用 return false 的方式来阻止浏览器的默认行为，而必须要地明确地调用preventDefault()来阻止默认行为。

     • 合成事件优点

       1. 兼容所有浏览器，更好的跨平台；
       2. 将事件统一存放在一个数组，避免频繁的新增与删除（垃圾回收）。
       3. 方便 react 统一管理和事务机制。

     • 合成事件对象的特点：

       1. 在事件处理函数中，可以正常访问事件属性。

       2. 为了性能考虑，执行完后，合成事件的事件属性将不能再访问。

          • 异步处理函数中，访问不到合成事件的属性。

          • 因为执行异步函数的时候，事件处理函数的上下文消失。

       执行完后，合成事件的属性会被重置为null。所以异步访问合成事件的属性，是无效的。

       解决方法：

       1. 用变量记录事件属性值
       javascript

       function onClick(event) {
           console.log(event); // => nullified object.
           console.log(event.type); // => "click"
           const eventType = event.type; // => "click"
       
           setTimeout(function() {
               console.log(event.type); // => null
               console.log(eventType); // => "click"
           }, 0);
       }

       2. e.persist()会将当前的合成事件对象，从对象池中移除，就不会回收该对象了。对象可以被异步程序访问到。

     • 合成事件阻止冒泡:

       1. e.stopPropagation

          只能阻止合成事件间冒泡，即下层的合成事件，不会冒泡到上层的合成事件。事件本身还都是在document上执行。最多只能阻止document事件不能再冒泡到window上。

       2. e.nativeEvent.stopImmediatePropagation

          能阻止合成事件不会冒泡到document上。

   • 函数调用

     javascript

     function formatName(user) {
         return user.firstName + ' ' + user.lastName;
     }
     
     const user = {
         firstName: 'Harper',
         lastName: 'Perez'
     };
     
     const element = (
         <h1>
             Hello, {formatName(user)}!
         </h1>
     );
     
     //相当于
     //const element = React.createElement(
     //    'h1',
     //    {className: 'greeting'},
     //    'Hello, world!'
     //);
     
     ReactDOM.render(
         element,
         document.getElementById('root')
     );

   • input双向绑定

     事件对象event中target在控制台查看为null，但是event.target却能获取到目标元素?

     因为React里面的事件并不是真实的DOM事件，而是自己在原生DOM事件上封装的合成事件。

     合成事件是由事件池来管理的，合成事件对象可能会被重用，合成事件的所有属性也会随之被清空。所以当在异步处理程序（如setTimeout等等）中或者浏览器控制台中去访问合成事件的属性，有可能就是空的。

     给出的方案：event.persist()，其实就是将当前的合成事件从事件池中移除了，所以能够继续保有对该事件的引用以及仍然能访问该事件的属性。

     javascript

     setId(e) {
         this.setState({
             id: e.target.value
         })
     }
     render(){
         return (
             <input onChange={(e)=>this.setId(e)} value={this.state.id} />
         )
     }

react生命周期 ​

1. 参考链接

   详解React生命周期(包括react16最新版)

   我对 React V16.4 生命周期的理解

   怎么理解react的副作用，为什么ajax、修改dom是副作用？

   React（17.0版本）生命周期概述

   「2021」高频前端面试题汇总之React篇（上）

2. 详解

   • 纯函数：固定输入，固定输出

   • 副作用(side effect)

     指一个 function 做了和本身运算返回值无关的事，比如：修改了全局变量、修改了传入的参数、console.log()、ajax 操作、修改 dom、设置定时器、设置订阅等。

   • React 在 V16.3 版本中，为下面三个生命周期函数加上了 UNSAFE：

     • UNSAFE_componentWillMount

       此处ajax的结果一定赶不上render，ajax应放在componentDidMount中

       服务器端渲染，ajax会被执行多次，也应放在componentDidMount中

       有人会将事件监听器（或订阅）添加到 UNSAFE_componentWillMount 中，但这可能导致服务器渲染（永远不会调用 componentWillUnmount）和异步渲染（在渲染完成之前可能被中断，导致不调用 componentWillUnmount）的内存泄漏

     • UNSAFE_componentWillReceiveProps

       有时候组件在 props 发生变化时会产生多次调用问题，应该使用 componentDidUpdate

       componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。

       使用好处： 在这个生命周期中，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。 可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。

     • UNSAFE_componentWillUpdate

       在异步模式下使用 UNSAFE_componentWillUpdate 都是不安全的，因为外部回调可能会在一次更新中被多次调用，应该使用 componentDidUpdate

     V17删除以上生命周期

     V16前后区别：由同步渲染改为异步渲染(fiber机制)

     • 删除原因

       被废弃的三个函数都是在render之前，因为fiber的出现，很可能因为高优先级任务的出现而打断现有任务导致它们会被执行多次。

       1. componentWillMount

          这个函数的功能完全可以使用componentDidMount(异步获取数据)和 constructor(初始化)来代替。

          如果在 componentWillMount 中订阅事件，但在服务端并不会执行 componentWillUnMount事件，也就是说服务端会导致内存泄漏，所以componentWilIMount完全可以不使用，但使用者有时候难免因为各种各样的情况在 componentWillMount中做一些操作，那么React为了约束开发者，干脆就抛掉了这个API

       2. componentWillReceiveProps

          在老版本的 React 中，如果组件自身的某个 state 跟其 props 密切相关的话，一直都没有一种很优雅的处理方式去更新 state，而是需要在 componentWilReceiveProps 中判断前后两个 props 是否相同，如果不同再将新的 props更新到相应的 state 上去。

          这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。类似的业务需求也有很多，如一个可以横向滑动的列表，当前高亮的 Tab 显然隶属于列表自身时，根据传入的某个值，直接定位到某个 Tab。

          为了解决这些问题，React引入了第一个新的生命周期：getDerivedStateFromProps。它有以下的优点∶

          • getDSFP是静态方法，在这里不能使用this，也就是一个纯函数，开发者不能写出副作用的代码
          • 开发者只能通过prevState而不是prevProps来做对比，保证了state和props之间的简单关系以及不需要处理第一次渲染时prevProps为空的情况
          • 基于第一点，将状态变化（setState）和昂贵操作（tabChange）区分开，更加便于 render 和 commit 阶段操作或者说优化。

       3. componentWillUpdate

          与 componentWillReceiveProps 类似，许多开发者也会在 componentWillUpdate 中根据 props 的变化去触发一些回调 。 但不论是 componentWilReceiveProps 还是 componentWilUpdate，都有可能在一次更新中被调用多次。

          componentDidUpdate 不存在这样的问题，一次更新中 componentDidUpdate 只会被调用一次，所以将原先写在 componentWillUpdate 中的回调迁移至 componentDidUpdate 就可以解决这个问题。

          另外一种情况则是需要获取DOM元素状态，但是由于在fiber中，render可打断，可能在componentWillMount中获取到的元素状态很可能与实际需要的不同，这个通常可以使用第二个新增的生命函数的解决 getSnapshotBeforeUpdate(prevProps, prevState)，getSnapshotBeforeUpdate会在最终确定的render执行之前执行，也就是能保证其获取到的元素状态与didUpdate中获取到的元素状态相同。

   • React 在 V16.3 版本中，新增了两个生命周期函数：

     • static getDerivedStateFromProps

       只有在 props 发生变化的时候才会调用，setState 和 forceUpdate 时则不会

     • getSnapshotBeforeUpdate

       大多数开发者使用 UNSAFE_componentWillUpdate 的场景是配合 componentDidUpdate，分别获取 rerender 前后的视图状态，进行必要的处理。但随着 React 新的 suspense、time slicing、异步渲染等机制的到来，render 过程可以被分割成多次完成，还可以被暂停甚至回溯，这导致 UNSAFE_componentWillUpdate 和 componentDidUpdate 执行前后可能会间隔很长时间，足够使用户进行交互操作更改当前组件的状态，这样可能会导致难以追踪的 BUG。React 新增的 getSnapshotBeforeUpdate 方法就是为了解决这问题

       getSnapshotBeforeUpdate 还有一个十分明显的好处：它调用的结果会作为第三个参数传入 componentDidUpdate，避免了 UNSAFE_componentWillUpdate 和 componentDidUpdate 配合使用时将组件临时的状态数据存在组件实例上浪费内存，getSnapshotBeforeUpdate 返回的数据在 componentDidUpdate 中用完即被销毁，效率更高。

   • V16之前的生命周期(同步渲染)

     • 组件初始化(initialization)阶段

       将父组件的props注入给子组件，定义this.state的初始内容

     • 组件的挂载(Mounting)阶段

       • componentWillMount

         在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，少用

       • render

         根据组件的props和state ，return UI，由React自身根据此元素去渲染出页面DOM。不能在里面执行this.setState，会有改变组件状态的副作用。

       • componentDidMount

         组件挂载到DOM后调用，且只会被调用一次

       • 组件的更新(update)阶段

         • 更新机制

           setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render。

         • 父组件重新render

           1. 直接使用,每当父组件重新render导致的重传props，子组件将直接跟着重新渲染，无论props是否有变化。可通过shouldComponentUpdate方法优化。
           javascript

           class Child extends Component {
           shouldComponentUpdate(nextProps){ // 应该使用这个方法，否则无论props是否有变化都将会导致组件跟着重新渲染
                   if(nextProps.someThings === this.props.someThings){
                       return false
                   }
               }
               render() {
                   return <div>{this.props.someThings}</div>
               }
           }

           2. 在componentWillReceiveProps方法中，将props转换成自己的state,在componentWillReceiveProps中调用 this.setState() 将不会引起第二次渲染。
           javascript

           class Child extends Component {
               constructor(props) {
                   super(props);
                   this.state = {
                       someThings: props.someThings
                   };
               }
               componentWillReceiveProps(nextProps) { // 父组件重传props时就会调用这个方法
                   this.setState({someThings: nextProps.someThings});
               }
               render() {
                   return <div>{this.state.someThings}</div>
               }
           }

         • 组件本身调用setState，无论state有没有变化。可通过shouldComponentUpdate方法优化。

           javascript

           class Child extends Component {
               constructor(props) {
                   super(props);
                   this.state = {
                       someThings:1
                   }
               }
               shouldComponentUpdate(nextStates){ // 应该使用这个方法，否则无论state是否有变化都将会导致组件重新渲染
                   if(nextStates.someThings === this.state.someThings){
                       return false
                   }
               }
           
               handleClick = () => { // 虽然调用了setState ，但state并无变化
                   const preSomeThings = this.state.someThings
                   this.setState({
                       someThings: preSomeThings
                   })
               }
           
               render() {
                   return <div onClick = {this.handleClick}>{this.state.someThings}</div>
               }
           }

         • componentWillReceiveProps(nextProps)

           响应 Props 变化之后进行更新的唯一方式，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变

         • shouldComponentUpdate(nextProps, nextState)

           通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染

         • componentWillUpdate(nextProps, nextState)

           在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。

         • render

           重新调用

         • componentDidUpdate(prevProps, prevState)

           在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state

     • 卸载阶段

       • componentWillUnmount

         在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清除componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

   • V16.4+ 的生命周期(异步渲染fiber)

     • 挂载阶段

       • constructor

         第一行执行 super(props)，否则我们无法在构造函数里拿到 this，然后初始化state

       • getDerivedStateFromProps

         不能在这函数里使用 this,在更新时接收到新的 props,可以根据新的 props 和当前的 state 来调整新的 state,主要用于在重新渲染期间手动对滚动位置进行设置等场景中

         javascript

         class Example extends React.Component {
             static getDerivedStateFromProps(props, state) {
                 //根据 nextProps 和 prevState 计算出预期的状态改变，返回结果会被送给 setState
                 // ...
             }
         }

       • UNSAVE_componentWillMount

         避免在此方法中引入任何副作用或订阅,改用 componentDidMount()

       • render

         返回需要渲染的东西，不应该包含其它的业务逻辑，如数据请求，业务逻辑移到 componentDidMount 和 componentDidUpdate 中。

         当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

         • 原生的 DOM，如 div
         • React 组件
         • 数组或 Fragment
         • Portals（插槽）
         • 字符串和数字，被渲染成文本节点
         • Boolean 或 null，不会渲染任何东西

       • componentDidMount

         在组件插入 DOM 树中立即调用，可进行数据请求、添加订阅，订阅可在componentWillUnmount() 里取消订阅

         可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。

     • 更新阶段

       指当组件的 props 发生了改变，或组件内部调用了 setState 或者发生了 forceUpdate，则进行更新。

       • UNSAFE_componentWillReceiveProps

       • getDerivedStateFromProps

       • shouldComponentUpdate(nextProps, nextState){}

         根据此函数的返回值来判断是否进行重新渲染，true 表示重新渲染，false 表示不重新渲染，默认返回 true

         首次渲染或者当我们调用 forceUpdate 时并不会触发此方法。此方法仅用于性能优化，返回 false 并不会阻止子组件在 state 更改时重新渲染，返回 false，则不会调用 UNSAFE_componentWillUpdate()，render() 和 componentDidUpdate()

         javascript

         shouldComponentUpdate(nexrProps) {
             if (this.props.num === nexrProps.num) {
                 return false
             }
             return true;
         }

         添加 shouldComponentUpdate 方法时，不建议使用深度相等检查（如使用 JSON.stringify()），因为深比较效率很低，可能会比重新渲染组件效率还低。而且该方法维护比较困难，建议使用该方法会产生明显的性能提升时使用。

       • UNSAFE_componentWillUpdate

       • render

       • getSnapshotBeforeUpdate(prevProps, prevState)

         在 render 之后，在更新之前被调用，可以去获取 DOM 信息，计算得到并返回一个 snapshot，这个 snapshot 会作为 componentDidUpdate 的第三个参数传入。如果你不想要返回值，返回 null，这个方法一定要和 componentDidUpdate 一起使用

         在重新渲染过程中手动保留滚动位置等情况下非常有用

         javascript

         getSnapshotBeforeUpdate(prevProps, prevState) {
             console.log('#enter getSnapshotBeforeUpdate');
             return 'foo';
         }
         
         componentDidUpdate(prevProps, prevState, snapshot) {
             console.log('#enter componentDidUpdate snapshot = ', snapshot);
         }

       • componentDidUpdate

         更新后会被立即调用。首次渲染不会执行此方法,可以操作 DOM，和发起服务器请求，还可以 setState，但是注意一定要用 if 语句控制，否则会导致无限循环

         如无配合getSnapshotBeforeUpdate，第三个参数为null

         javascript

         componentDidUpdate(prevProps) {
             // 典型用法（不要忘记比较 props）：
             if (this.props.userID !== prevProps.userID) {
                 this.fetchData(this.props.userID);
             }
         }

     • 卸载阶段

       • componentWillUnmount

         清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等，不能setState()

     • 其他不常用的生命周期函数

       • static getDerivedStateFromError(error)

         会在后代组件抛出错误后被调用。它将抛出的错误作为参数，并返回一个值以更新 state。getDerivedStateFromError() 会在渲染阶段调用，因此不允许出现副作用。如遇此类情况，改用 componentDidCatch()。

       • componentDidCatch(error, info)

         在后代组件抛出错误后被调用，error抛出的错误。info带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

         如果发生错误，你可以通过调用 setState 使用 componentDidCatch() 渲染降级 UI，但在未来的版本中将不推荐这样做。可以使用静态 getDerivedStateFromError() 来处理降级渲染。

   • react17生命周期示例

     javascript

     import * as React from "react";
     
     export class Test extends React.Component {
         constructor(props) {
             super(props);
             this.state = {
                 count: 1
             };
             console.log("1. constructor");
         }
         static getDerivedStateFromProps(props, state) {
             console.log("2. getDerivedStateFromProps");
             return {
                 count: props.count
             };
         }
         componentDidMount() {
             console.log("3. componentDidMount");
         }
         shouldComponentUpdate() {
             console.log("4. shouldComponentUpdate");
             return true;
         }
         getSnapshotBeforeUpdate(prevProps, prevState) {
             console.log("5. getSnapshotBeforeUpdate");
             return null;
         }
         componentDidUpdate(props, state, snapshot) {
             console.log("6. componentDidUpdate");
             console.log("snapshot:", snapshot);
         }
         componentWillUnmount() {
             console.log("7. componentWillUnmount");
         }
         render() {
             console.log("0. render");
             const { count } = this.state;
             return (
                 <ul>
                     <li>state: {count}</li>
                     <li>props: {count}</li>
                 </ul>
             );
         }
     }

react数据绑定原理 ​

1. 参考链接

   如何理解react的单向数据流？react算mvvm么？ 他实现的双向绑定原理是啥？

   react文档

   你不知道的React 和 Vue 的20个区别【面试必备】

2. 详解

   • 单向数据流

     数据从父组件通过props流向子组件，所以UI只能影响树中“低于”它们的组件

   • setState

     setState 通过一个队列机制来实现 state 更新，当执行 setState() 时，会将需要更新的 state 浅合并后,根据变量 isBatchingUpdates(默认为 false)判断是直接更新还是放入状态队列

     通过js的事件绑定程序 addEventListener 和使用setTimeout/setInterval 等 React 无法掌控的 API情况下isBatchingUpdates 为 false，同步更新。除了这几种情况外batchedUpdates函数将isBatchingUpdates修改为 true；

     放入队列的不会立即更新 state，队列机制可以高效的批量更新 state。而如果不通过setState，直接修改this.state 的值，则不会放入状态队列

     setState 依次直接设置 state 值会被合并，但是传入 function 不会被合并

     javascript

     // 情况一
     state={
         count:0
     }
     handleClick() {
         this.setState({
             count: this.state.count + 1
         })
         this.setState({
             count: this.state.count + 1
         })
         this.setState({
             count: this.state.count + 1
         })
     }
     // count 值依旧为1
     
     // 情况二
     increment(state, props) {
         return {
             count: state.count + 1
         }
     }
     
     handleClick() {
         this.setState(this.increment)
         this.setState(this.increment)
         this.setState(this.increment)
     }
     // count 值为 3

请求后台资源 ​

1. 参考链接

   react--axios

2. 详解

   javascript

   const axios = require('axios');
   ...
   getDate = () => {
       const url = "...";
       axios.get(url)
           .then((response) => {
               this.setState({
                   list: response.data.list
               })
           })
   
   }
   componentDidMount() {
       this.getDate();
   }

父子组件通信props ​

1. 参考链接

   React 父子组件通信

   「2021」高频前端面试题汇总之React篇（上）

2. 详解

   "render prop"是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术

   • 优点

     数据共享、代码复用，将组件内的state作为props传递给调用者，将渲染逻辑交给调用者。

   • 缺点

     无法在 return 语句外访问数据、嵌套写法不够优雅

   • props为什么是只读的？

     this.props是组件之间沟通的一个接口，它只能从父组件流向子组件，具有函数式编程的思想:

     • 给定相同的输入，总是返回相同的输出。
     • 过程没有副作用。
     • 不依赖外部状态。

     props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用

   • props改变时更新组件的有哪些方法？

     1. componentWillReceiveProps（已废弃）

        可以在子组件的render函数执行前，通过this.props获取旧的属性，通过nextProps获取新的props，对比两次props是否相同，从而更新子组件自己的state。

        好处是，可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。

     2. getDerivedStateFromProps（16.3引入）

        这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在需要使用componentWillReceiveProps时，就可以考虑使用getDerivedStateFromProps来进行替代。

        两者的参数是不相同的，而getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。

        如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾：

        javascript

        static getDerivedStateFromProps(nextProps, prevState) {
            const {type} = nextProps;
            // 当传入的type发生变化的时候，更新state
            if (type !== prevState.type) {
                return {
                    type,
                };
            }
            // 否则，对于state不进行任何操作
            return null;
        }

   • props.children和React.Children的区别

     当涉及组件嵌套，在父组件中使用props.children把所有子组件显示出来

     typescript

     function ParentComponent(props){
         return (
             <div>
                 {props.children}
             </div>
         )
     }

     把父组件中的属性传给所有的子组件，需要使用React.Children方法

     typescript

     //子组件
     function RadioOption(props) {
         return (
             <label>
             <input type="radio" value={props.value} name={props.name} />
             {props.label}
             </label>
         )
     }
     //父组件用,props是指父组件的props
     function renderChildren(props) {
         
         //遍历所有子组件
         return React.Children.map(props.children, child => {
             if (child.type === RadioOption)
                 return React.cloneElement(child, {
                     //把父组件的props.name赋值给每个子组件
                     name: props.name
                 })
             else
             return child
         })
     }
     //父组件
     function RadioGroup(props) {
         return (
             <div>
             {renderChildren(props)}
             </div>
         )
     }
     function App() {
         return (
             <RadioGroup name="hello">
             <RadioOption label="选项一" value="1" />
             <RadioOption label="选项二" value="2" />
             <RadioOption label="选项三" value="3" />
             </RadioGroup>
         )
     }
     export default App;

   • 状态提升

     • 概念

       将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上改变这个状态然后通过props分发给子组件。

     • 场景

       父组件中有两个input子组件，如果想在第一个输入框输入数据，来改变第二个输入框的值，这就需要用到状态提升。

     • 例子

       typescript

       class Father extends React.Component {
           constructor(props) {
               super(props)
               this.state = {
                   Value1: '',
                   Value2: ''
               }
           }
           value1Change(aa) {
               this.setState({
                   Value1: aa
               })
           }
           value2Change(bb) {
               this.setState({
                   Value2: bb
               })
           }
           render() {
               return (
                   <div style={{ padding: "100px" }}>
                       <Child1 value1={this.state.Value1} onvalue1Change={this.value1Change.bind(this)} />
                       
       
                       <Child2 value2={this.state.Value1} />
                   </div>
               )
           }
       }
       class Child1 extends React.Component {
           constructor(props) {
               super(props)
           }
           changeValue(e) {
               this.props.onvalue1Change(e.target.value)
           }
           render() {
               return (
                   <input value={this.props.Value1} onChange={this.changeValue.bind(this)} />
               )
           }
       }
       class Child2 extends React.Component {
           constructor(props) {
               super(props)
           }
           render() {
               return (
                   <input value={this.props.value2} />
               )
           }
       }
       
       ReactDOM.render(
           <Father />,
           document.getElementById('root')
       )

   • 检验props

     React提供了PropTypes以供验证使用。当我们向Props传入的数据无效（向Props传入的数据类型和验证的数据类型不符）就会在控制台发出警告信息。它可以避免随着应用越来越复杂从而出现的问题。并且，它还可以让程序变得更易读。

     如果项目中使用了TypeScript，那么就可以不用PropTypes来校验，而使用TypeScript定义接口来校验props。

     javascript

     import PropTypes from 'prop-types';
     
     class Greeting extends React.Component {
         render() {
             return (
             <h1>Hello, {this.props.name}</h1>
             );
         }
     }
     
     Greeting.propTypes = {
         name: PropTypes.string
     };

   • 使用

     父组件传入state指定的值给子组件，定义回调函数callback接收子组件传值

     javascript

     import React, { Component } from 'react';
     
     import './App.css';
     
     import Child from './child'
     
     class App extends Component {
         constructor(props){
             super(props);
             this.state={
                 msg:'父类的消息',
                 name:'John',
                 age:99
             }
         }
     
         callback=(msg,name,age)=>{
             this.setState({msg});
             this.setState({name});
             this.setState({age});
         }
     
         render() {
             return (
                 <div className="App">
                     <p> Message:   {this.state.msg}</p>
                     <Child callback={this.callback} age={this.state.age} name={this.state.name}></Child>
                 </div>
             );
         }
     }
     
     export default App;

     子组件通过props接收父组件参数，也通过proprs中指定的回调函数传值给父组件

     javascript

     import React from "react";
     
     class Child extends React.Component{
         constructor(props){
             super(props);
             this.state={
                 name:'Andy',
                 age:31,
                 msg:"来自子类的消息"
             }
         }
     
         change=()=>{
             this.props.callback(this.state.msg,this.state.name,this.state.age);
         }
     
         render(){
             return(
                 <div>
                     <div>{this.props.name}</div>
                     <div>{this.props.age}</div>
                     <button onClick={this.change}>点击</button>
                 </div>
             )
         }
     }
     
     export default Child;

跨级组件通信 ​

1. 参考链接

   React 中组件间通信的几种方式

2. 详解

   1. 利用中间组件实现多层父子通信

   2. 利用context实现跨级通信

   上层组件定义context，并提供属性类型PropTypes，提供 getChildContext 函数初始化context，提供回调函数接收底层组件传值

   javascript

   import React, { Component } from 'react';
   import PropTypes from "prop-types";
   import Sub from "./Sub";
   import "./App.css";
   
   export default class App extends Component{
       constructor(props) {
           super(props);
           this.state = {
               color:"red"
           };
       }
       // 父组件声明自己支持 context
       static childContextTypes = {
           color:PropTypes.string,
           callback:PropTypes.func,
       }
   
       // 父组件提供一个函数，用来返回相应的 context 对象
       getChildContext(){
           return{
               color:"red",
               callback:this.callback.bind(this)
           }
       }
   
       callback(msg){
           console.log(msg)
       }
   
       render(){
           return(
               <div>
                   <Sub></Sub>
               </div>
           );
       }
   }

   中间组件

   javascript

   import React from "react";
   import SubSub from "./SubSub";
   
   const Sub = (props) =>{
       return(
           <div>
               <SubSub />
           </div>
       );
   }
   
   export default Sub;

   底层组件在constructor中需传入context，也提供自己的context(含PropTypes)，使用context指定的回调函数向上层组件传值

   javascript

   import React,{ Component } from "react";
   import PropTypes from "prop-types";
   
   export default class SubSub extends Component{
       constructor(props,context){
           super(props,context);
       }
       // 子组件声明自己需要使用 context
       static contextTypes = {
           color:PropTypes.string,
           callback:PropTypes.func,
       }
       render(){
           const style = { color:this.context.color }
           const cb = (msg) => {
               return () => {
                   this.context.callback(msg);
               }
           }
           return(
               <div style = { style }>
                   SUBSUB
                   <button onClick = { cb("我胡汉三又回来了！") }>点击我</button>
               </div>
           );
       }
   }

   底层组件是无状态组件的情况

   javascript

   import React,{ Component } from "react";
   import PropTypes from "prop-types";
   
   const SubSub = (props,context) => {
       const style = { color:context.color }
       const cb = (msg) => {
           return () => {
               context.callback(msg);
           }
       }
   
       return(
           <div style = { style }>
               SUBSUB
               <button onClick = { cb("我胡汉三又回来了！") }>点击我</button>
           </div>
       );
   }
   
   SubSub.contextTypes = {
       color:PropTypes.string,
       callback:PropTypes.func,
   }
   
   export default SubSub;

非嵌套组件间通信 ​

1. 参考链接

   React 中组件间通信的几种方式

2. 详解

   1. 利用共同上层组件实现2重跨级组件通信

   2. 自定义事件

      npm install events --save

      通过emitter.emit(事件名称,值)发布信息

      通过emitter.addListener(事件名称,(值)=>{...})订阅信息并处理

      通过emitter.removeListener(订阅器)取消订阅

      ev.js

      javascript

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

      App.js

      javascript

      import React, { Component } from 'react';
      import Foo from "./Foo";
      import Boo from "./Boo";
      import "./App.css";
      export default class App extends Component{
          render(){
              return(
                  <div>
                      <Foo />
                      <Boo />
                  </div>
              );
          }
      }

      Foo.js

      javascript

      import React,{ Component } from "react";
      import emitter from "./ev"
      
      export default class Foo extends Component{
          constructor(props) {
              super(props);
              this.state = {
                  msg:null,
              };
          }
          componentDidMount(){
              // 声明一个自定义事件
              // 在组件装载完成以后
              this.eventEmitter = emitter.addListener("callMe",(msg)=>{
                  this.setState({
                      msg
                  })
              });
          }
          // 组件销毁前移除事件监听
          componentWillUnmount(){
              emitter.removeListener(this.eventEmitter);
          }
          render(){
              return(
                  <div>
                      { this.state.msg }
                      我是非嵌套 1 号
                  </div>
              );
          }
      }

      Boo.js

      javascript

      import React,{ Component } from "react";
      import emitter from "./ev"
      
      export default class Boo extends Component{
          render(){
              const cb = (msg) => {
                  return () => {
                      // 触发自定义事件
                      emitter.emit("callMe","Hello")
                  }
              }
              return(
                  <div>
                      我是非嵌套 2 号
                      <button onClick = { cb("blue") }>点击我</button>
                  </div>
              );
          }
      }

react路由 ​

1. 参考链接

   React Router 中文文档

   最新 React Router 全面整理

   React Router教程

   「2021」高频前端面试题汇总之React篇（上）

2. 详解

   • 库

     • react-router 核心组件
     • react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）
     • react-router-native 应用于native端的路由

   • React-Router的实现原理

     1. 基于 hash 的路由：通过监听hashchange事件
     2. 基于 H5 history 路由，改变 url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API，监听 url 的变化可以通过自定义事件触发实现

   • 路由配置

     可写在组件内，建议使用集中式路由(顶层组件定义路由)，若使用各子组件控制的分布式路由(子组件包含其下级路由)，需要跳转回父级以上页面且不刷新页面会比较麻烦。

   • 路由组件

     typescript

     import { BrowserRouter as Router, Redirect, Route, Link, Switch } from 'react-router-dom';
     <BrowserRouter
         basename={string}
         forceRefresh={bool}
         getUserConfirmation={func}
         keyLength={number}
     /> 浏览器的路由组件,不带#
     <HashRouter
         basename={string}
         getUserConfirmation={func}
         hashType={string}  
     /> URL格式为Hash路由组件,带#
     <MemoryRouter> 内存路由组件
     <NativeRouter> Native的路由组件
     <StaticRouter> 地址不改变的静态路由组件

     1. ...Router是所有路由组件共用的底层接口组件，它是路由规则制定的最外层的容器。

        • BrowserRouter/HashRouter组件提供了四个属性

          • basename: 字符串类型，路由器的默认根路径

            html

            <BrowserRouter basename="/admin"/>
                ...
                <Link to="/home"/> // 被渲染为 <a href="/admin/home">
                ...
            </BrowserRouter>

          • forceRefresh: 布尔类型，在导航的过程中整个页面是否刷新

            当设置为 true 时，在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时，才设置为 true。

          • getUserConfirmation: 函数类型，当导航需要确认时执行的函数。默认是：window.confirm

            typescript

            // 使用默认的确认函数
            const getConfirmation = (message, callback) => {
                const allowTransition = window.confirm(message)
                callback(allowTransition)
            }
            
            <BrowserRouter getUserConfirmation={getConfirmation}/>

          • keyLength: 数字类型location.key 的长度。默认是 6

            html

            <BrowserRouter keyLength={12}/>

        • MemoryRouter主要用在ReactNative这种非浏览器的环境中，因此直接将URL的history保存在了内存中。

        • StaticRouter 主要用于服务端渲染。

     2. Link路由跳转的组件

        • to

          需要跳转到的路径(pathname)或地址（location）

        • replace

          当设置为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。

          当设置为 false 时(默认)，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。

        • 样例

          typescript

          import { Link } from 'react-router-dom'
          // 字符串参数
          <Link to="/query">查询</Link>
          
          // 对象参数
          <Link to={{
              pathname: '/query',
              search: '?key=name',
              hash: '#hash',
              state: { fromDashboard: true }
          }}>查询</Link>

        • Link 标签和 a 标签的区别

          • 相同

            从最终渲染的 DOM 来看，这两者都是链接

          • 区别

            Link是react-router 里实现路由跳转的链接，一般配合Route 使用，react-router接管了其默认的链接跳转行为，区别于传统的页面跳转，Link 的“跳转”行为只会触发相匹配的Route对应的页面内容更新，而不会刷新整个页面。

            Link做了3件事情：

            1. 有onclick那就执行onclick
            2. click的时候阻止a标签默认事件
            3. 根据跳转href(即是to)，用history (web前端路由两种方式之一，history & hash)跳转，此时只是链接变了，并没有刷新页面而a标签就是普通的超链接了，用于从当前页面跳转到href指向的另一个页面(非锚点情况)。

     3. NavLink组件

        NavLink是一个特殊版本的Link，可以使用activeClassName来设置Link被选中时被附加的class，使用activeStyle来配置被选中时应用的样式

        exact属性,要求location完全匹配才会附加class和style

        typescript

        // 选中后被添加class selected
        <NavLink to={'/'} exact activeClassName='selected'>Home</NavLink>
        // 选中后被附加样式 color:red
        <NavLink to={'/gallery'} activeStyle={{color:red}}>Gallery</NavLink>
        //activeClassName默认值为 active
        //strict: bool类型，当值为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线。

     4. Route组件

        • 渲染方式

          • component渲染

            typescript

            // 当location形如 http://location/时，Home就会被渲染。
            // 因为 "/" 会匹配所有的URL，所以这里设置一个exact来强制绝对匹配。
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>

          • render渲染

            typescript

            <Route path="/home" render={() => {
                console.log('额外的逻辑');
                return (<div>Home</div>);
            }/>

          • children渲染

            typescript

            // 在匹配时，容器的class是light，<Home />会被渲染
            // 在不匹配时，容器的class是dark，<About />会被渲染
            <Route path='/home' children={({ match }) => (
                <div className={match ? 'light' : 'dark'}>
                    {match ? <Home/>:<About>}
                </div>
            )}/>

        • 路由组件props

          • match

            match.params可以拿到从location中解析出来的参数

            html

            <Link to='/p/1' />
            <Link to='/p/2' />
            <Link to='/p/3' />
            ......
            <Route path='/p/:id' render={(match)=<h3>当前文章ID:{match.params.id}</h3>)} />

          • location

            location 对象不会发生改变，可以在生命周期的钩子函数中查看当前页面的位置是否发生改变，对于获取远程数据以及使用动画时非常有用。

            javascript

            {
                key: 'ac3df4', // 在使用 hashHistory 时，没有 key
                pathname: '/somewhere'
                search: '?some=search-string',
                hash: '#howdy',
                state: {
                    [userDefined]: true
                }
            }

            • 在 Route component 中，以 this.props.location 的方式获取，
            • 在 Route render 中，以 ({ location }) => () 的方式获取，
            • 在 Route children 中，以 ({ location }) => () 的方式获取，
            • 在 withRouter 中，以 this.props.location 的方式获取。

            可以设置location状态，如弹出框场景

            typescript

            // 通常你只需要这样使用 location
            <Link to="/somewhere"/>
            
            // 但是你同样可以这么用
            const location = {
                pathname: '/somewhere'
                state: { fromDashboard: true }
            }
            
            <Link to={location}/>
            <Redirect to={location}/>
            history.push(location)
            history.replace(location)

            可以把 location 传入一下组件,用于等待跳转

          • history

            history 对象通常会具有以下属性和方法：

            • length -（ number 类型）指的是 history 堆栈的数量。
            • action -（ string 类型）指的是当前的动作（action），例如 PUSH，REPLACE 以及 POP 。
            • location -（ object类型）是指当前的位置（location），location 会具有如下属性：
              • pathname -（ string 类型）URL路径。
              • search -（ string 类型）URL中的查询字符串（query string）。
              • hash -（ string 类型）URL的 hash 分段。
              • state -（ string 类型）是指 location 中的状态，例如在 push(path, state) 时，state会描述什么时候 location 被放置到堆栈中等信息。这个 state 只会出现在 browser history 和 memory history 的环境里。
            • push(path, [state]) -（ function 类型）在 hisotry 堆栈顶加入一个新的条目。
            • replace(path, [state]) -（ function 类型）替换在 history 堆栈中的当前条目。
            • go(n) -（ function 类型）将 history 对战中的指针向前移动 n 。
            • goBack() -（ function 类型）等同于 go(-1) 。
            • goForward() -（ function 类型）等同于 go(1) 。
            • block(prompt) -（ function 类型）阻止跳转。

        • Redirect组件

          location会被重写为Redirect的to指定的新location。它的一个用途是登录重定向。

          html

          <Redirect to="/new"/>

        • Switch组件

          渲染匹配地址(location)的第一个Route或者Redirect

          typescript

          <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
          </Switch>

   • 样例

     typescript

     import * as React from 'react';
     import { BrowserRouter as Router, Redirect, Route, Link } from 'react-router-dom';
     import Home from '../pages/Home';
     import Web1Layout from '../pages/web1/Layout';
     import Web2Layout from '../pages/web2/Layout';
     import Login from '../pages/share/Login';
     
     const AppRouter = () => {
         return (
             <Router>
                 <h3>APP</h3>
                 <div>
                     <Link to="/home">home</Link>
                     <Link to="/web1">web1</Link>
                     <Link to="/web2">web2</Link>
                     <Link to="/login">login</Link>
                 </div>
                 <Route path='/home' exact={true} component={Home} />
                 <Route path='/web1' exact={true} component={Web1Layout} />
                 <Route path='/web2' exact={true} component={Web2Layout} />
                 <Route path='/login' exact={true} component={Login} />
                 <Redirect to='/home' />
             </Router>
         );
     }
     
     export default AppRouter;

react路由守卫 ​

1. 参考链接

   React Router 4.0 实现路由守卫三分钟实现一个react-router-dom5.0的路由拦截（导航守卫）

2. 详解

   React Router 4.0 采用了声明式的组件，路由即组件，要实现路由守卫功能，就得我们自己去写了。

   router.config.ts

   typescript

   import { HomePage } from '../pages/home/home.page';
   import { LoginPage } from '../pages/login/login.page';
   import { ErrorPage } from '../pages/error/error.page';
   
   interface routerConfigModel {
       path:string,
       component?:any,
       auth?:boolean
   }
   export const routerConfig:routerConfigModel[] = [
       {
           path:'/',
           component:HomePage,
           auth:true,
       },{
           path:'/home',
           component:HomePage,
           auth:true,
       },{
           path:'/login',
           component:LoginPage,
       },{
           path:'/404',
           component:ErrorPage
       }
   ];

   router.ts

   typescript

   import * as React from 'react';
   import { HashRouter,Switch } from 'react-router-dom';
   import { FrontendAuth } from '../components/frontend-auth/frontend-auth.component'
   import { routerConfig } from './router.config'
   
   export class Router extends React.Component{
       render(){
           return(
               <HashRouter>
                   <Switch>
                       <FrontendAuth config={routerConfig} />
                   </Switch>
               </HashRouter>
           );
       }
   }

   frontend-auth.component.ts

   typescript

   import * as React from 'react';
   import { Route,Redirect } from 'react-router-dom';
   import { propsModel } from './frontend-auth.model'
   
   export class FrontendAuth extends React.Component<any,propsModel>{
       render(){
           const { location,config } = this.props;
           const { pathname } = location;
           const isLogin = localStorage.getItem('__config_center_token')
           
           // 如果该路由不用进行权限校验，登录状态下登陆页除外
           // 因为登陆后，无法跳转到登陆页
           // 这部分代码，是为了在非登陆状态下，访问不需要权限校验的路由
           const targetRouterConfig = config.find((v:any) => v.path === pathname);
           if(targetRouterConfig && !targetRouterConfig.auth && !isLogin){
               const { component } = targetRouterConfig;
               return <Route exact path={pathname} component={component} />
           }
   
           if(isLogin){
               // 如果是登陆状态，想要跳转到登陆，重定向到主页
               if(pathname === '/login'){
                   return <Redirect to='/' />
               }else{
                   // 如果路由合法，就跳转到相应的路由
                   if(targetRouterConfig){
                       return <Route path={pathname} component={targetRouterConfig.component} />
                   }else{
                       // 如果路由不合法，重定向到 404 页面
                       return <Redirect to='/404' />
                   }
               }
           }else{
               // 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
               if(targetRouterConfig && targetRouterConfig.auth){
                   return <Redirect to='/login' />
               }else{
                   // 非登陆状态下，路由不合法时，重定向至 404
                   return <Redirect to='/404' />
               }
           }
       }
   }

   frontend-auth.model.ts

   typescript

   export interface propsModel {
       config:any[],
   }

页面传参与获取 ​

1. 参考链接

   React 跳转页面 传递传递参数，并获取参数

   React 页面间传参

   「2021」高频前端面试题汇总之React篇（上）

2. 详解

   javascript

   //传参
   this.props.history.push("/detail", {
       dotData: record
   });
   //获取
   const messages = this.props.location.state.dotData;

   typescript

   //传参
   <Link className={"btn_tableOp"} to={{
       pathname: '/web/credit/customer/customer/informationManager/infoManagerView',
       state: {value: 'params-test'}}}><br>查看<br></Link>
   //获取
   componentWillMount() {
       console.log(this.props.location.state.value, 'value')
   }
   //方法弊端：页面刷新后无法获取参数报错

   typescript

   //传参
   <Link className={"btn_tableOp"} to={`/web/credit/customer/customer/informationManager/view/${record.customerCode}/${record.tradeCode}`}>查看</Link>
   //路由
   <Route path="/web/credit/customer/customer/informationManager/view/:customerCode/:tradeCode" exact component={InfoManagerView} />
   //获取
   this.props.match.params.customerCode

   typescript

   import { useHistory } from "react-router-dom";
   let history = useHistory();
   /////////////////////////////////
   let history = this.props.history;

redux ​

1. 参考链接

   Redux 中文文档

   React多组件状态共享之Redux

   Redux中的connect方法

   你不知道的React 和 Vue 的20个区别【面试必备】

   redux

   「2021」高频前端面试题汇总之JavaScript篇（下）

   「2021」高频前端面试题汇总之React篇（下）

2. 详解

   • 主要解决的问题

     单纯的Redux只是一个状态机，是没有UI呈现的，react-redux作用是将Redux的状态机和React的UI呈现绑定在一起，当dispatch action改变state的时候，会自动更新页面。

   • 依赖：redux、react-redux、redux-devtools

   • Redux源码模块

     • compose.js 提供从右到左进行函数式编程
     • createStore.js 提供作为生成唯一store的函数
     • combineReducers.js 提供合并多个reducer的函数，保证store的唯一性
     • bindActionCreators.js 可以让开发者在不直接接触dispacth的前提下进行更改state的操作
     • applyMiddleware.js 这个方法通过中间件来增强dispatch的功能

   • 工作流程

     • 首先，用户（通过View）发出Action，发出方式就用到了dispatch方法
     • 然后，Store自动调用Reducer，并且传入两个参数：当前State和收到的Action，Reducer会返回新的State
     • State—旦有变化，Store就会调用监听函数，来更新View

   • 要点

     • 单一数据源

       • 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。

         • store维持应用的 state；
         • 提供 getState() 方法获取 state；
         • 提供 dispatch(action) 方法更新 state；
         • 通过 subscribe(listener) 注册监听器;
         • 通过 subscribe(listener) 返回的函数注销监听器。

       • 注意每个 reducer 只负责管理全局 state 中它负责的一部分。

       • 每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。

     • State 是只读的

       唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

     • 使用纯函数来执行修改

       只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。

   • 使用场合

     （1）用户的使用方式复杂

     （2）不同身份的用户有不同的使用方式（比如普通用户和管理员）

     （3）多个用户之间可以协作

     （4）与服务器大量交互，或者使用了WebSocket

     （5）View要从多个来源获取数据

   • 组件场景

     （1）某个组件的状态，需要共享

     （2）某个状态需要在任何地方都可以拿到

     （3）一个组件需要改变全局状态

     （4）一个组件需要改变另一个组件的状态

   • 简写 Redux

     javascript

     function createStore(reducer) {
         let state;
         let listeners=[];
         function getState() {
             return state;
         }
     
         function dispatch(action) {
             state=reducer(state,action);
             listeners.forEach(l=>l());
         }
     
         function subscribe(listener) {
             listeners.push(listener);
             return function () {
                 const index=listeners.indexOf(listener);
                 listeners.splice(inddx,1);
             }
         }
         
         dispatch({});
         
         return {
             getState,
             dispatch,
             subscribe
         }
     
     }

   • react-redux实现

     1. connect 将store和dispatch分别映射成props属性对象，返回组件
     2. context 上下文 导出Provider 和 consumer
     3. Provider 一个接受store的组件，通过context api传递给所有子组件

   • 用法

     • 简单使用

       /store/store.js

       javascript

       import { createStore } from 'redux'
       
       // redux的初始值
       const initialState = {
           lastUpdate: 0,
           light: false,
           count: 0
       };
       
       // reducer纯函数
       const reducer = (state = initialState, action) => {
           switch (action.type) {
               case 'TICK':
                   return {
                       ...state,
                       lastUpdate: action.lastUpdate,
                       light: !!action.light
                   };
               case 'INCREMENT':
                   return {
                       ...state,
                       count: state.count + 1
                   };
               case 'DECREMENT':
                   return {
                       ...state,
                       count: state.count - 1
                   };
               case 'RESET':
                   return {
                       ...state,
                       count: initialState.count
                   };
               default:
                   return state
           }
       };
       
       const store = createStore(reducer)
       
       export default store

       页面

       javascript

       import React from 'react'
       import store from '/store/store'
       
       class Store extends React.Component {
           
           constructor(props) {
               super(props);
               this.state = {
                   count: store.getState().count
               };
           }
           change(){
               store.dispatch({
                   type: 'TICK',
                   light: typeof window === 'object',
                   lastUpdate: Date.now()
               });
           }
           render() {
               return (
                   <>
                       <span onClick={() => change()}>test redux,{this.state.count}</span>
                   </>
               )
           }
       }
       
       export default Store

     • 基础配置

     javascript

     import { createStore } from 'redux';
     import {
         INCREMENT,
         DECREMENT
     } from './actions'
     /**
     * const INCREMENT = 'increment';
     * const DECREMENT = 'decrement';
     *
     * export default { INCREMENT, DECREMENT }
     */
     
     /**
     * 这是一个 reducer，形式为 (state, action) => state 的纯函数。
     * 描述了 action 如何把 state 转变成下一个 state。
     *
     * state 的形式取决于你，可以是基本类型、数组、对象、
     * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
     * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。
     *
     * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)
     * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。
     */
     function counter(state = 0, action) {
         switch (action.type) {
         case INCREMENT:
             return state + 1;
         case DECREMENT:
             return state - 1;
         default:
             return state;
         }
     }
     
     // 创建 Redux store 来存放应用的状态。
     // API 是 { subscribe, dispatch, getState }。
     let store = createStore(counter);
     
     // 可以手动订阅更新，也可以事件绑定到视图层。
     store.subscribe(() =>
         console.log(store.getState())
     );
     
     // 改变内部 state 惟一方法是 dispatch 一个 action。
     // action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
     store.dispatch({ type: INCREMENT });
     // 1
     store.dispatch({ type: INCREMENT });
     // 2
     store.dispatch({ type: DECREMENT });
     // 1

     • 合并reducers
     javascript

     import { combineReducers } from 'redux'
     import {
         ADD_TODO,
         TOGGLE_TODO,
         SET_VISIBILITY_FILTER,
         VisibilityFilters
     } from './actions'
     const { SHOW_ALL } = VisibilityFilters
     
     function visibilityFilter(state = SHOW_ALL, action) {
         switch (action.type) {
             case SET_VISIBILITY_FILTER:
             return action.filter
             default:
             return state
         }
     }
     
     function todos(state = [], action) {
         switch (action.type) {
             case ADD_TODO:
             return [
                 ...state,
                 {
                 text: action.text,
                 completed: false
                 }
             ]
             case TOGGLE_TODO:
             return state.map((todo, index) => {
                 if (index === action.index) {
                 return Object.assign({}, todo, {
                     completed: !todo.completed
                 })
                 }
                 return todo
             })
             default:
             return state
         }
     }
     
     const todoApp = combineReducers({
         visibilityFilter,
         todos
     })
     
     export default todoApp

     • connect

       用于连接React组件与 Redux store

       不会改变它“连接”的组件，而是提供一个经过包裹的 connect 组件。 conenct 接受4个参数，分别是 mapStateToProps，mapDispatchToProps，mergeProps，options

       • mapStateToProps

         允许将store中的数据作为props绑定到组件中，只要store发生变化就会调用，返回的结果必须是一个纯对象，这个对象会与组件的 props 合并

         javascript

         state => ({
             count: state.counter.count
         })
         
         // or
         const mapStateToProps = (state) => {
             return ({
                 count: state.counter.count
             })
         }

       • mapDispatchToProps

         允许我们将 action 作为 props 绑定到组件中，如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中 dispatch 方法会将 action creator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。

         javascript

         dispatch => ({
             login: (...args) => dispatch(loginAction.login(..args)),
         })
         
         // or
         const mapDispatchToProps = (dispatch, ownProps) => {
             return {
                 increase: (...args) => dispatch(actions.increase(...args)),
                 decrease: (...args) => dispatch(actions.decrease(...args))
             }
         }

       • mergeProps

         mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数，根据组件的 props 来筛选部分的 state 数据，或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数，默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

       • options

         可以定制 connector 的行为

       javascript

       import React from 'react'
       import PropTypes from 'prop-types'
       
       const Link = ({ active, children, onClick }) => {
           if (active) {
               return <span>{children}</span>
           }
       
           return (
               <a
               href=""
               onClick={e => {
                   e.preventDefault()
                   onClick()
               }}
               >
               {children}
               </a>
           )
       }
       
       Link.propTypes = {
           active: PropTypes.bool.isRequired,
           children: PropTypes.node.isRequired,
           onClick: PropTypes.func.isRequired
       }
       
       export default Link

       javascript

       import { connect } from 'react-redux'
       import { setVisibilityFilter } from '../actions'
       import Link from '../components/Link'
       
       const mapStateToProps = (state, ownProps) => {
           return {
               active: ownProps.filter === state.visibilityFilter
           }
       }
       
       const mapDispatchToProps = (dispatch, ownProps) => {
           return {
               onClick: () => {
                   dispatch(setVisibilityFilter(ownProps.filter))
               }
           }
       }
       
       const FilterLink = connect(
           mapStateToProps,
           mapDispatchToProps
       )(Link)
       
       export default FilterLink

       • 异步与中间件

         每个 API 请求都需要 dispatch 至少三种 action：请求开始、请求成功、请求失败

         javascript

         { type: 'FETCH_POSTS' }
         { type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
         { type: 'FETCH_POSTS', status: 'success', response: { ... } }
         //or
         { type: 'FETCH_POSTS_REQUEST' }
         { type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
         { type: 'FETCH_POSTS_SUCCESS', response: { ... } }

         使用 ES6 计算属性语法，使用 Object.assign() 来简洁高效地更新 state[action.subreddit]

         javascript

         return Object.assign({}, state, {
             [action.subreddit]: posts(state[action.subreddit], action)
         })
         //or
         let nextState = {}
         nextState[action.subreddit] = posts(state[action.subreddit], action)
         return Object.assign({}, state, nextState)

         完整示例

         javascript

         //index.js
         import thunkMiddleware from 'redux-thunk'
         import { createLogger } from 'redux-logger'
         import { createStore, applyMiddleware } from 'redux'
         import { selectSubreddit, fetchPosts } from './actions'
         import rootReducer from './reducers'
         
         const loggerMiddleware = createLogger()
         
         const store = createStore(
             rootReducer,
             applyMiddleware(
                 thunkMiddleware, // 允许我们 dispatch() 函数
                 loggerMiddleware // 一个很便捷的 middleware，用来打印 action 日志
             )
         )
         
         store.dispatch(selectSubreddit('reactjs'))
         store
         .dispatch(fetchPosts('reactjs'))
         .then(() => console.log(store.getState()))

         javascript

         //actions.js
         import fetch from 'cross-fetch'
         
         export const REQUEST_POSTS = 'REQUEST_POSTS'
         function requestPosts(subreddit) {
             return {
                 type: REQUEST_POSTS,
                 subreddit
             }
         }
         
         export const RECEIVE_POSTS = 'RECEIVE_POSTS'
         function receivePosts(subreddit, json) {
             return {
                 type: RECEIVE_POSTS,
                 subreddit,
                 posts: json.data.children.map(child => child.data),
                 receivedAt: Date.now()
             }
         }
         
         export const INVALIDATE_SUBREDDIT = 'INVALIDATE_SUBREDDIT'
         export function invalidateSubreddit(subreddit) {
             return {
                 type: INVALIDATE_SUBREDDIT,
                 subreddit
             }
         }
         
         function fetchPosts(subreddit) {
             return dispatch => {
                 dispatch(requestPosts(subreddit))
                 return fetch(`http://www.reddit.com/r/${subreddit}.json`)
                 .then(response => response.json())
                 .then(json => dispatch(receivePosts(subreddit, json)))
             }
         }
         
         function shouldFetchPosts(state, subreddit) {
             const posts = state.postsBySubreddit[subreddit]
             if (!posts) {
                 return true
             } else if (posts.isFetching) {
                 return false
             } else {
                 return posts.didInvalidate
             }
         }
         
         export function fetchPostsIfNeeded(subreddit) {
         
             // 注意这个函数也接收了 getState() 方法
             // 它让你选择接下来 dispatch 什么。
         
             // 当缓存的值是可用时，
             // 减少网络请求很有用。
         
             return (dispatch, getState) => {
                 if (shouldFetchPosts(getState(), subreddit)) {
                     // 在 thunk 里 dispatch 另一个 thunk！
                     return dispatch(fetchPosts(subreddit))
                 } else {
                     // 告诉调用代码不需要再等待。
                     return Promise.resolve()
                 }
             }
         }

         手写logger中间件

         javascript

         /**
         * 记录所有被发起的 action 以及产生的新的 state。
         */
         const logger = store => next => action => {
             console.group(action.type)
             console.info('dispatching', action)
             let result = next(action)
             console.log('next state', store.getState())
             console.groupEnd(action.type)
             return result
         }
         
         /**
         * 在 state 更新完成和 listener 被通知之后发送崩溃报告。
         */
         const crashReporter = store => next => action => {
             try {
                 return next(action)
             } catch (err) {
                 console.error('Caught an exception!', err)
                 Raven.captureException(err, {
                     extra: {
                         action,
                         state: store.getState()
                     }
                 })
                 throw err
             }
         }
         
         /**
         * 用 { meta: { delay: N } } 来让 action 延迟 N 毫秒。
         * 在这个案例中，让 `dispatch` 返回一个取消 timeout 的函数。
         */
         const timeoutScheduler = store => next => action => {
             if (!action.meta || !action.meta.delay) {
                 return next(action)
             }
         
             let timeoutId = setTimeout(
                 () => next(action),
                 action.meta.delay
             )
         
             return function cancel() {
                 clearTimeout(timeoutId)
             }
         }
         
         /**
         * 通过 { meta: { raf: true } } 让 action 在一个 rAF 循环帧中被发起。
         * 在这个案例中，让 `dispatch` 返回一个从队列中移除该 action 的函数。
         */
         const rafScheduler = store => next => {
             let queuedActions = []
             let frame = null
         
             function loop() {
                 frame = null
                 try {
                     if (queuedActions.length) {
                         next(queuedActions.shift())
                     }
                 } finally {
                     maybeRaf()
                 }
             }
         
             function maybeRaf() {
                 if (queuedActions.length && !frame) {
                     frame = requestAnimationFrame(loop)
                 }
             }
         
             return action => {
                 if (!action.meta || !action.meta.raf) {
                     return next(action)
                 }
         
                 queuedActions.push(action)
                 maybeRaf()
         
                 return function cancel() {
                     queuedActions = queuedActions.filter(a => a !== action)
                 }
             }
         }
         
         /**
         * 使你除了 action 之外还可以发起 promise。
         * 如果这个 promise 被 resolved，他的结果将被作为 action 发起。
         * 这个 promise 会被 `dispatch` 返回，因此调用者可以处理 rejection。
         */
         const vanillaPromise = store => next => action => {
             if (typeof action.then !== 'function') {
                 return next(action)
             }
         
             return Promise.resolve(action).then(store.dispatch)
         }
         
         /**
         * 让你可以发起带有一个 { promise } 属性的特殊 action。
         *
         * 这个 middleware 会在开始时发起一个 action，并在这个 `promise` resolve 时发起另一个成功（或失败）的 action。
         *
         * 为了方便起见，`dispatch` 会返回这个 promise 让调用者可以等待。
         */
         const readyStatePromise = store => next => action => {
             if (!action.promise) {
                 return next(action)
             }
         
             function makeAction(ready, data) {
                 let newAction = Object.assign({}, action, { ready }, data)
                 delete newAction.promise
                 return newAction
             }
         
             next(makeAction(false))
             return action.promise.then(
                 result => next(makeAction(true, { result })),
                 error => next(makeAction(true, { error }))
             )
         }
         
         /**
         * 让你可以发起一个函数来替代 action。
         * 这个函数接收 `dispatch` 和 `getState` 作为参数。
         *
         * 对于（根据 `getState()` 的情况）提前退出，或者异步控制流（ `dispatch()` 一些其他东西）来说，这非常有用。
         *
         * `dispatch` 会返回被发起函数的返回值。
         */
         const thunk = store => next => action =>
             typeof action === 'function' ?
                 action(store.dispatch, store.getState) :
                 next(action)
         
             // 你可以使用以上全部的 middleware！（当然，这不意味着你必须全都使用。）
             let todoApp = combineReducers(reducers)
             let store = createStore(
             todoApp,
             applyMiddleware(
                 rafScheduler,
                 timeoutScheduler,
                 thunk,
                 vanillaPromise,
                 readyStatePromise,
                 logger,
                 crashReporter
             )
         )

   • Redux 中异步的请求怎么处理?

     1. 使用react-thunk中间件
     2. 使用react-asga中间件

   • Redux 中间件是什么？接受几个参数？柯里化函数两端的参数具体是什么？

     原本 view -→> action -> reducer -> store 的数据流加上中间件后变成了 view -> action -> middleware -> reducer -> store ，在这一环节可以做一些"副作用"的操作，如异步请求、打印日志等。

     redux中间件接受一个对象作为参数，对象的参数上有两个字段 dispatch 和 getState，分别代表着 Redux Store 上的两个同名函数。

     柯里化函数两端一个是 middewares，一个是store.dispatch

   • mobox 和 redux 有什么区别？

     • 共同点

       • 为了解决状态管理混乱，无法有效同步的问题统一维护管理应用状态
       • 某一状态只有一个可信数据来源（通常命名为store，指状态容器）
       • 操作更新状态方式统一，并且可控（通常以action方式提供更新状态的途径）
       • 支持将store与React组件连接，如react-redux，mobx-react

     • 区别

       • redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中
       • redux使用plain object保存数据，需要手动处理变化后的操作;mobx适用observable保存数据，数据变化后自动处理响应的操作
       • redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数;mobx中的状态是可变的，可以直接对其进行修改
       • mobx更多的使用面向对象的编程思维;redux的函数式编程思想需要借助一系列的中间件来处理异步和副作用
       • mobx中有更多的抽象和封装，调试会比较困难，同时结果也难以预测;而redux提供能够进行时间回溯的开发工具，同时其纯函数以及更少的抽象，让调试变得更加的容易

   • vuex与redux对比

     1. Redux：view——>actions——>reducer——>state变化——>view变化（同步异步一样）
     2. Vuex： view——>commit——>mutations——>state变化——>view变化（同步操作）
     3. Vuex： view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）

     • 相同

       • redux与vuex都是对mvvm思想的服务，将数据从视图中抽离的一种方案;
       • 形式上：vuex借鉴了redux，将store作为全局的数据中心，进行mode管理;
       • 单—的数据源
       • 变化可以预测

     • 不同

       • Vuex改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值即可
       • Vuex由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可
       • Vuex数据流的顺序是∶View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变（vue检测到数据变化自动渲染）

   • Redux中的connect有什么作用?

     connect负责连接React和Redux

     1. 获取state

        connect 通过 context获取 Provider 中的 store，通过 store.getState() 获取整个store tree 上所有state

     2. 包装原组件

        将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对象 Connect，Connect 重新 render 外部传入的原组件 WrappedComponent ，并把 connect 中传入的 mapStateToProps，mapDispatchToProps与组件上原有的 props合并后，通过属性的方式传给WrappedComponent

     3. 监听store tree变化

        connect缓存了store tree中state的状态，通过当前state状态 和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染