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. 详解

   text

   /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;