关于react.js:react高频知识点梳理

（1）应用<Route> 组件

路由匹配是通过比拟 <Route> 的 path 属性和以后地址的 pathname 来实现的。当一个 <Route> 匹配胜利时，它将渲染其内容，当它不匹配时就会渲染 null。没有门路的 <Route> 将始终被匹配。

// when location = {pathname: '/about'}
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

（2）联合应用 <Switch> 组件和 <Route> 组件

<Switch> 用于将 <Route> 分组。

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

<Switch> 不是分组 <Route> 所必须的，但他通常很有用。一个 <Switch> 会遍历其所有的子 <Route>元素，并仅渲染与以后地址匹配的第一个元素。

（3）应用 <Link>、<NavLink>、<Redirect> 组件

<Link> 组件来在你的应用程序中创立链接。无论你在何处渲染一个<Link>，都会在应用程序的 HTML 中渲染锚（<a>）。

<Link to="/">Home</Link>   
// <a href='/'>Home</a>

是一种非凡类型的当它的 to 属性与以后地址匹配时，能够将其定义为 ” 沉闷的 ”。

// location = {pathname: '/react'}
<NavLink to="/react" activeClassName="hurray">
    React
</NavLink>
// <a href='/react' className='hurray'>React</a>

当咱们想强制导航时，能够渲染一个 <Redirect>，当一个<Redirect> 渲染时，它将应用它的 to 属性进行定向。

操作 DOM，为什么操作 DOM?
场景
- 图片渲染好后，操作图片宽高。比方做个放大镜性能

通过援用而不是应用来命名组件 displayName。

应用 displayName 命名组件：

export default React.createClass({displayName: 'TodoApp',  // ...})

React 举荐的办法：

export default class TodoApp extends React.Component {// ...}

Keys 会有助于 React 辨认哪些 items 扭转了，被增加了或者被移除了。Keys 应该被赋予数组内的元素以赋予 (DOM) 元素一个稳固的标识，抉择一个 key 的最佳办法是应用一个字符串，该字符串能惟一地标识一个列表项。很多时候你会应用数据中的 IDs 作为 keys，当你没有稳固的 IDs 用于被渲染的 items 时，能够应用我的项目索引作为渲染项的 key，但这种形式并不举荐，如果 items 能够从新排序，就会导致 re-render 变慢。

（1）Redux 和 Vuex 区别

Vuex 改良了 Redux 中的 Action 和 Reducer 函数，以 mutations 变动函数取代 Reducer，无需 switch，只需在对应的 mutation 函数里扭转 state 值即可
Vuex 因为 Vue 主动从新渲染的个性，无需订阅从新渲染函数，只有生成新的 State 即可
Vuex 数据流的程序是∶View 调用 store.commit 提交对应的申请到 Store 中对应的 mutation 函数 ->store 扭转（vue 检测到数据变动主动渲染）

艰深点了解就是，vuex 弱化 dispatch，通过 commit 进行 store 状态的一次更变；勾销了 action 概念，不用传入特定的 action 模式进行指定变更；弱化 reducer，基于 commit 参数间接对数据进行转变，使得框架更加繁难;

（2）独特思维

单—的数据源
变动能够预测

实质上∶ redux 与 vuex 都是对 mvvm 思维的服务，将数据从视图中抽离的一种计划。

解答

如果您尝试间接扭转组件的状态，React 将无奈得悉它须要从新渲染组件。通过应用 setState() 办法，React 能够更新组件的 UI。

另外，您还能够谈谈如何不保障状态更新是同步的。如果须要基于另一个状态（或属性）更新组件的状态，请向 setState() 传递一个函数，该函数将 state 和 props 作为其两个参数：

this.setState((state, props) => ({counter: state.counter + props.increment}));

客户端路由实现的思维：

基于 hash 的路由：通过监听 hashchange 事件，感知 hash 的变动
- 扭转 hash 能够间接通过 location.hash=xxx
基于 H5 history 路由：
- 扭转 url 能够通过 history.pushState 和 resplaceState 等，会将 URL 压入堆栈，同时可能利用 history.go() 等 API
- 监听 url 的变动能够通过自定义事件触发实现

react-router 实现的思维：

基于 history 库来实现上述不同的客户端路由实现思维，并且可能保留历史记录等，磨平浏览器差别，下层无感知
通过保护的列表，在每次 URL 发生变化的回收，通过配置的路由门路，匹配到对应的 Component，并且 render

参考：前端 react 面试题具体解答

React 申明组件的三种形式：

函数式定义的 无状态组件
ES5 原生形式 React.createClass 定义的组件
ES6 模式的 extends React.Component 定义的组件

（1）无状态函数式组件 它是为了创立纯展现组件，这种组件只负责依据传入的 props 来展现，不波及到 state 状态的操作
组件不会被实例化，整体渲染性能失去晋升，不能拜访 this 对象，不能拜访生命周期的办法

（2）ES5 原生形式 React.createClass // RFC React.createClass 会自绑定函数办法，导致不必要的性能开销，减少代码过期的可能性。

（3）E6 继承模式 React.Component // RCC 目前极为举荐的创立有状态组件的形式，最终会取代 React.createClass 模式；绝对于 React.createClass 能够更好实现代码复用。

无状态组件绝对于于后者的区别： 与无状态组件相比，React.createClass 和 React.Component 都是创立有状态的组件，这些组件是要被实例化的，并且能够拜访组件的生命周期办法。

React.createClass 与 React.Component 区别：

① 函数 this 自绑定

React.createClass 创立的组件，其每一个成员函数的 this 都有 React 主动绑定，函数中的 this 会被正确设置。
React.Component 创立的组件，其成员函数不会主动绑定 this，须要开发者手动绑定，否则 this 不能获取以后组件实例对象。

② 组件属性类型 propTypes 及其默认 props 属性 defaultProps 配置不同

React.createClass 在创立组件时，无关组件 props 的属性类型及组件默认的属性会作为组件实例的属性来配置，其中 defaultProps 是应用 getDefaultProps 的办法来获取默认组件属性的
React.Component 在创立组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的动态属性来配置的。

③ 组件初始状态 state 的配置不同

React.createClass 创立的组件，其状态 state 是通过 getInitialState 办法来配置组件相干的状态；
React.Component 创立的组件，其状态 state 是在 constructor 中像初始化组件属性一样申明的。

react-redux 数据传输∶ view–>action–>reducer–>store–>view。看下点击事件的数据是如何通过 redux 传到 view 上：

view 上的 AddClick 事件通过 mapDispatchToProps 把数据传到 action —> click:()=>dispatch(ADD)
action 的 ADD 传到 reducer 上
reducer 传到 store 上 const store = createStore(reducer);
store 再通过 mapStateToProps 映射穿到 view 上 text:State.text

代码示例∶

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux';
class App extends React.Component{render(){let { text, click, clickR} = this.props;
        return(
            <div>
                <div> 数据: 已有人{text}</div>
                <div onClick={click}> 加人 </div>
                <div onClick={clickR}> 减人 </div>
            </div>
        )
    }
}
const initialState = {text:5}
const reducer = function(state,action){switch(action.type){
        case 'ADD':
            return {text:state.text+1}
        case 'REMOVE':
            return {text:state.text-1}
        default:
            return initialState;
    }
}

let ADD = {type:'ADD'}
let Remove = {type:'REMOVE'}

const store = createStore(reducer);

let mapStateToProps = function (state){
    return{text:state.text}
}

let mapDispatchToProps = function(dispatch){
    return{click:()=>dispatch(ADD),
        clickR:()=>dispatch(Remove)
    }
}

const App1 = connect(mapStateToProps,mapDispatchToProps)(App);

ReactDOM.render(<Provider store = {store}>
        <App1></App1>
    </Provider>,document.getElementById('root')
)

实质上来说 JSX 是 React.createElement(component, props, ...children) 办法的语法糖。在 React 17 之前，如果应用了 JSX，其实就是在应用 React，babel 会把组件转换为 CreateElement 模式。在 React 17 之后，就不再须要引入，因为 babel 曾经能够帮咱们主动引入 react。

在 React 组件中，应该在 componentDidMount 中发动网络申请。这个办法会在组件第一次“挂载”(被增加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保障在组件挂载之前 Ajax 申请曾经实现，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDidMount 中发动网络申请将保障这有一个组件能够更新了。

局部 UI 中的 JavaScript 谬误不应该毁坏整个应用程序。为了解决 React 用户的这个问题，React 16 引入了一个“谬误边界(Error Boundaries)”的新概念。

import React from 'react';
import ReactDOM from 'react-dom';
class ErrorBoundary extends React.Component{constructor(props) {super(props);
        this.state={hasError:false};
    }
    componentDidCatch(err,info) {this.setState({hasError: true});
    }
    render() {if (this.state.hasError) {return <h1>Something Went Wrong</h1>}
        return this.props.children;
    }
}

class Page extends React.Component{render() {
        return (
            <ErrorBoundary>
                <Clock/>
            </ErrorBoundary>
        )
    }
}
class Clock extends React.Component{render() {
        return (<div>hello{null.toString()}</div>
        )
    }
}

ReactDOM.render(<Page/>,document.querySelector('#root'));

React V15 在渲染时，会递归比对 VirtualDOM 树，找出须要变动的节点，而后同步更新它们，零打碎敲。这个过程期间，React 会占据浏览器资源，这会导致用户触发的事件得不到响应，并且会导致掉帧，导致用户感觉到卡顿。

为了给用户制作一种利用很快的“假象”，不能让一个工作长期霸占着资源。能够将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执行视作操作系统的“过程”，须要通过某些调度策略正当地调配 CPU 资源，从而进步浏览器的用户响应速率, 同时兼顾工作执行效率。

所以 React 通过 Fiber 架构，让这个执行过程变成可被中断。“适时”地让出 CPU 执行权，除了能够让浏览器及时地响应用户的交互，还有其余益处:

分批延时对 DOM 进行操作，防止一次性操作大量 DOM 节点，能够失去更好的用户体验；
给浏览器一点喘息的机会，它会对代码进行编译优化（JIT）及进行热代码优化，或者对 reflow 进行修改。

核心思想: Fiber 也称协程或者纤程。它和线程并不一样，协程自身是没有并发或者并行能力的（须要配合线程），它只是一种管制流程的让出机制。让出 CPU 的执行权，让 CPU 能在这段时间执行其余的操作。渲染的过程能够被中断，能够将控制权交回浏览器，让位给高优先级的工作，浏览器闲暇后再复原渲染。

区别：

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

合成事件是 react 模仿原生 DOM 事件所有能力的一个事件对象，其长处如下：

兼容所有浏览器，更好的跨平台；
将事件对立寄存在一个数组，防止频繁的新增与删除（垃圾回收）。
不便 react 对立治理和事务机制。

事件的执行程序为原生事件先执行，合成事件后执行，合成事件会冒泡绑定到 document 上，所以尽量避免原生事件与合成事件混用，如果原生事件阻止冒泡，可能会导致合成事件不执行，因为须要冒泡到 document 上合成事件才会执行。

（1）原理 Redux 源码次要分为以下几个模块文件

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

const actionTypes = {
    ADD: 'ADD',
    CHANGEINFO: 'CHANGEINFO',
}

const initState = {info: '初始化',}

export default function initReducer(state=initState, action) {switch(action.type) {
        case actionTypes.CHANGEINFO:
            return {
                ...state,
                info: action.preload.info || '',
            }
        default:
            return {...state};
    }
}

export default function createStore(reducer, initialState, middleFunc) {if (initialState && typeof initialState === 'function') {
        middleFunc = initialState;
        initialState = undefined;
    }

    let currentState = initialState;

    const listeners = [];

    if (middleFunc && typeof middleFunc === 'function') {
        // 封装 dispatch 
        return middleFunc(createStore)(reducer, initialState);
    }

    const getState = () => {return currentState;}

    const dispatch = (action) => {currentState = reducer(currentState, action);

        listeners.forEach(listener => {listener();
        })
    }

    const subscribe = (listener) => {listeners.push(listener);
    }

    return {
        getState,
        dispatch,
        subscribe
    }
}

（2）工作流程

const store= createStore（fn）生成数据;
action: {type: Symble(‘action01), payload:’payload’ }定义行为;
dispatch 发动 action：store.dispatch(doSomething(‘action001’));
reducer：解决 action，返回新的 state;

艰深点解释：

首先，用户（通过 View）收回 Action，收回形式就用到了 dispatch 办法
而后，Store 主动调用 Reducer，并且传入两个参数：以后 State 和收到的 Action，Reducer 会返回新的 State
State—旦有变动，Store 就会调用监听函数，来更新 View

以 store 为外围，能够把它看成数据存储核心，然而他要更改数据的时候不能间接批改，数据批改更新的角色由 Reducers 来负责，store 只做存储，中间人，当 Reducers 的更新实现当前会通过 store 的订阅来告诉 react component，组件把新的状态从新获取渲染，组件中也能被动发送 action，创立 action 后这个动作是不会执行的，所以要 dispatch 这个 action，让 store 通过 reducers 去做更新 React Component 就是 react 的每个组件。

官网解释∶

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 本身不是 React API 的一部分，它是一种基于 React 的组合个性而造成的设计模式。

高阶组件（HOC）就是一个函数，且该函数承受一个组件作为参数，并返回一个新的组件，它只是一种组件的设计模式，这种设计模式是由 react 本身的组合性质必然产生的。咱们将它们称为纯组件，因为它们能够承受任何动静提供的子组件，但它们不会批改或复制其输出组件中的任何行为。

// hoc 的定义
function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {constructor(props) {super(props);
      this.state = {data: selectData(DataSource, props)
      };
    }
    // 一些通用的逻辑解决
    render() {
      // ... 并应用新数据渲染被包装的组件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };

// 应用
const BlogPostWithSubscription = withSubscription(BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id));

1）HOC 的优缺点

长处∶ 逻辑服用、不影响被包裹组件的外部逻辑。
毛病∶hoc 传递给被包裹组件的 props 容易和被包裹后的组件重名，进而被笼罩

2）实用场景

代码复用，逻辑形象
渲染劫持
State 形象和更改
Props 更改

3）具体利用例子

权限管制： 利用高阶组件的 条件渲染 个性能够对页面进行权限管制，权限管制个别分为两个维度：页面级别和页面元素级别

// HOC.js
function withAdminAuth(WrappedComponent) {
    return class extends React.Component {
        state = {isAdmin: false,}
        async UNSAFE_componentWillMount() {const currentRole = await getCurrentUserRole();
            this.setState({isAdmin: currentRole === 'Admin',});
        }
        render() {if (this.state.isAdmin) {return <WrappedComponent {...this.props} />;
            } else {return (<div> 您没有权限查看该页面，请分割管理员！</div>);
            }
        }
    };
}

// pages/page-a.js
class PageA extends React.Component {constructor(props) {super(props);
        // something here...
    }
    UNSAFE_componentWillMount() {// fetching data}
    render() {// render page with data}
}
export default withAdminAuth(PageA);


// pages/page-b.js
class PageB extends React.Component {constructor(props) {super(props);
    // something here...
        }
    UNSAFE_componentWillMount() {// fetching data}
    render() {// render page with data}
}
export default withAdminAuth(PageB);

组件渲染性能追踪： 借助父组件子组件生命周期规定捕捉子组件的生命周期，能够不便的对某个组件的渲染工夫进行记录∶

class Home extends React.Component {render() {return (<h1>Hello World.</h1>);
        }
    }
    function withTiming(WrappedComponent) {
        return class extends WrappedComponent {constructor(props) {super(props);
                this.start = 0;
                this.end = 0;
            }
            UNSAFE_componentWillMount() {super.componentWillMount && super.componentWillMount();
                this.start = Date.now();}
            componentDidMount() {super.componentDidMount && super.componentDidMount();
                this.end = Date.now();
                console.log(`${WrappedComponent.name} 组件渲染工夫为 ${this.end - this.start} ms`);
            }
            render() {return super.render();
            }
        };
    }

    export default withTiming(Home);

留神：withTiming 是利用反向继承实现的一个高阶组件，性能是计算被包裹组件（这里是 Home 组件）的渲染工夫。

页面复用

const withFetching = fetching => WrappedComponent => {
    return class extends React.Component {
        state = {data: [],
        }
        async UNSAFE_componentWillMount() {const data = await fetching();
            this.setState({data,});
        }
        render() {return <WrappedComponent data={this.state.data} {...this.props} />;
        }
    }
}

// pages/page-a.js
export default withFetching(fetching('science-fiction'))(MovieList);
// pages/page-b.js
export default withFetching(fetching('action'))(MovieList);
// pages/page-other.js
export default withFetching(fetching('some-other-type'))(MovieList);

（1）props

props 是一个从内部传进组件的参数，次要作为就是从父组件向子组件传递数据，它具备可读性和不变性，只能通过内部组件被动传入新的 props 来从新渲染子组件，否则子组件的 props 以及展示模式不会扭转。

（2）state

state 的次要作用是用于组件保留、管制以及批改本人的状态，它只能在 constructor 中初始化，它算是组件的公有属性，不可通过内部拜访和批改，只能通过组件外部的 this.setState 来批改，批改 state 属性会导致组件的从新渲染。

（3）区别

props 是传递给组件的（相似于函数的形参），而 state 是在组件内被组件本人治理的（相似于在一个函数内申明的变量）。
props 是不可批改的，所有 React 组件都必须像纯函数一样爱护它们的 props 不被更改。
state 是在组件中创立的，个别在 constructor 中初始化 state。state 是多变的、能够批改，每次 setState 都异步更新的。

Js 形式
依据用户权限类型，把菜单配置成 json, 没有权限的间接不显示
react-router 形式在 route 标签上增加 onEnter 事件，进入路由之前替换到首页

<Route path="/home" component={App} onEnter={(nexState,replace)=>{if(nexState.location.pathname!=='/'){var  sid = UtilsMoudle.getSidFromUrl(nexState);
         if(!sid){replace("/")
         }else{console.log(sid);
         }
      }
    }}>

本人封装一个 privateRouter 组件外面判断是否有权限，有的话返回
<Route path={path} component={component} exact={exact}/>
没有权限的话 component 返回一个提示信息的组件。
扩大一下，如果是依据用权限来判断是否暗藏组件该怎么做呢？
react 能够应用高阶组件，在高阶组件外面判断是否有权限，而后判断是否返回组件，无权限返回 null
vue 能够应用自定义指令，如果没有权限移除组件

// 须要在入口处增加自定义权限指令 v -auth，显示可操作组件
Vue.directive('auth', {bind: function (el, binding, vnode) {
        // 用户权限表
        const rules = auths
        for (let i = 0; i < rules.length; i++) {const item = rules[i]
            if(!binding.value || (binding.value == item.auth)){
                // 权限容许则显示组件
                return true
            }
        }
        // 移除组件
        el.parentNode.removeChild(el)
    }
})
// 应用
<template>
  <div>
    <Button v-auth="admin_user_add"> 增加用户 </Button>
    <Button v-auth="admin_user_del"> 删除用户 </Button>
    <Button v-auth="admin_user_edit"> 编辑用户 </Button>
  </div>
</template>

当你想去配置 webpack 或 babel presets。

React-Hooks 是 React 团队在 React 组件开发实际中，逐步认知到的一个改良点，这背地其实波及对 类组件 和函数组件 两种组件模式的思考和偏重。

（1）类组件： 所谓类组件，就是基于 ES6 Class 这种写法，通过继承 React.Component 得来的 React 组件。以下是一个类组件：

class DemoClass extends React.Component {
  state = {text: ""};
  componentDidMount() {//...}
  changeText = (newText) => {
    this.setState({text: newText});
  };

  render() {
    return (
      <div className="demoClass">
        <p>{this.state.text}</p>
        <button onClick={this.changeText}> 批改 </button>
      </div>
    );
  }
}

能够看出，React 类组件外部预置了相当多的“现成的货色”等着咱们去调度 / 定制，state 和生命周期就是这些“现成货色”中的典型。要想得到这些货色，难度也不大，只须要继承一个 React.Component 即可。

当然，这也是类组件的一个不便，它太繁冗了，对于解决许多问题来说，编写一个类组件切实是一个过于简单的姿态。简单的姿态必然带来昂扬的了解老本，这也是咱们所不想看到的。除此之外，因为开发者编写的逻辑在封装后是和组件粘在一起的，这就使得 类组件外部的逻辑难以实现拆分和复用。

（2）函数组件：函数组件就是以函数的状态存在的 React 组件。晚期并没有 React-Hooks，函数组件外部无奈定义和保护 state，因而它还有一个别名叫“无状态组件”。以下是一个函数组件：

function DemoFunction(props) {const { text} = props
  return (
    <div className="demoFunction">
      <p>{` 函数组件接管的内容：[${text}]`}</p>
    </div>
  );
}

相比于类组件，函数组件肉眼可见的特质天然包含轻量、灵便、易于组织和保护、较低的学习老本等。

通过比照，从状态上能够对两种组件做辨别，它们之间的区别如下：

类组件须要继承 class，函数组件不须要；
类组件能够拜访生命周期办法，函数组件不能；
类组件中能够获取到实例化后的 this，并基于这个 this 做各种各样的事件，而函数组件不能够；
类组件中能够定义并保护 state（状态），而函数组件不能够；

除此之外，还有一些其余的不同。通过下面的区别，咱们不能说谁好谁坏，它们各有本人的劣势。在 React-Hooks 呈现之前，类组件的能力边界显著强于函数组件。

实际上，类组件和函数组件之间，是面向对象和函数式编程这两套不同的设计思维之间的差别。而函数组件更加符合 React 框架的设计理念：React 组件自身的定位就是函数，一个输出数据、输入 UI 的函数。作为开发者，咱们编写的是申明式的代码，而 React 框架的次要工作，就是及时地把申明式的代码转换为命令式的 DOM 操作，把数据层面的形容映射到用户可见的 UI 变动中去。这就意味着从原则上来讲，React 的数据应该总是紧紧地和渲染绑定在一起的，而类组件做不到这一点。函数组件就真正地将数据和渲染绑定到了一起。函数组件是一个更加匹配其设计理念、也更有利于逻辑拆分与重用的组件表达形式。

为了能让开发者更好的的去编写函数式组件。于是，React-Hooks 便应运而生。

React-Hooks 是一套可能使函数组件更弱小、更灵便的“钩子”。

函数组件比起类组件少了很多货色，比方生命周期、对 state 的治理等。这就给函数组件的应用带来了十分多的局限性，导致咱们并不能应用函数这种模式，写出一个真正的全功能的组件。而 React-Hooks 的呈现，就是为了帮忙函数组件补齐这些（绝对于类组件来说）缺失的能力。

如果说函数组件是一台笨重的快艇，那么 React-Hooks 就是一个内容丰盛的零部件箱。“重装战舰”所预置的那些设施，这个箱子里根本全都有，同时它还不强制你全都要，而是容许你自在地抉择和应用你须要的那些能力，而后将这些能力以 Hook（钩子）的模式“钩”进你的组件里，从而定制出一个最适宜你的“专属战舰”。

关于react.js:react高频知识点梳理

如何配置 React-Router 实现路由切换

refs 的作用是什么，你在什么样的业务场景下应用 refs

React 组件命名举荐的形式是哪个？

当渲染一个列表时，何为 key？设置 key 的目标是什么

Redux 和 Vuex 有什么区别，它们的独特思维

为什么调用 setState 而不是间接扭转 state？

React-Router 的实现原理是什么？

React 申明组件有哪几种办法，有什么不同？

Redux 怎么实现属性传递，介绍下原理

为什么应用 jsx 的组件中没有看到应用 react 却须要引入 react？

应该在 React 组件的何处发动 Ajax 申请

react16 的谬误边界（Error Boundaries）是什么

对 React-Fiber 的了解，它解决了什么问题？

React 的事件和一般的 HTML 事件有什么不同？

Redux 原理及工作流程

React 高阶组件是什么，和一般组件有什么区别，实用什么场景

React 组件的 state 和 props 有什么区别？

用户不同权限能够查看不同的页面如何实现？

什么起因会促使你脱离 create-react-app 的依赖

对 React Hook 的了解，它的实现原理是什么