React-Hooks怎样封装防抖和节流-面试真题

react 强制刷新

component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新

官网解释如下

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。如果标记发生变化，React 仍将只更新 DOM。

通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。

shouldComponentUpdate 在初始化 和 forceUpdate 不会执行

react-router里的<Link>标签和<a>标签有什么区别

对比<a>,Link组件避免了不必要的重渲染

React 组件中怎么做事件代理？它的原理是什么？

React基于Virtual DOM实现了一个SyntheticEvent层（合成事件层），定义的事件处理器会接收到一个合成事件对象的实例，它符合W3C标准，且与原生的浏览器事件拥有同样的接口，支持冒泡机制，所有的事件都自动绑定在最外层上。

在React底层，主要对合成事件做了两件事：

• 事件委派： React会把所有的事件绑定到结构的最外层，使用统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部事件监听和处理函数。
• 自动绑定： React组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件。

React-Router怎么设置重定向？

使用<Redirect>组件实现路由的重定向：

<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id'/>
  <Route path='/users/profile/:id' component={
   Profile}/>
</Switch>

当请求 /users/:id 被重定向去 '/users/profile/:id'：

• 属性 from: string：需要匹配的将要被重定向路径。
• 属性 to: string：重定向的 URL 字符串
• 属性 to: object：重定向的 location 对象
• 属性 push: bool：若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面。

什么是上下文Context

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

• 用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取

import React,{
   Component} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class Header extends Component{
   
    render() {
   
        return (
            <div>
                <Title/>
            </div>
        )
    }
}
class Title extends Component{
   
    static contextTypes={
   
        color:PropTypes.string
    }
    render() {
   
        return (
            <div style={
   {
   color:this.context.color}}>
                Title
            </div>
        )
    }
}
class Main extends Component{
   
    render() {
   
        return (
            <div>
                <Content>
                </Content>
            </div>
        )
    }
}
class Content extends Component{
   
    static contextTypes={
   
        color: PropTypes.string,
        changeColor:PropTypes.func
    }
    render() {
   
        return (
            <div style={
   {
   color:this.context.color}}>
                Content
                <button onClick={
   ()=>this.context.changeColor('green')}>绿色</button>
                <button onClick={
   ()=>this.context.changeColor('orange')}>橙色</button>
            </div>
        )
    }
}
class Page extends Component{
   
    constructor() {
   
        super();
        this.state={
   color:'red'};
    }
    static childContextTypes={
   
        color: PropTypes.string,
        changeColor:PropTypes.func
    }
    getChildContext() {
   
        return {
   
            color: this.state.color,
            changeColor:(color)=>{
   
                this.setState({
   color})
            }
        }
    }
    render() {
   
        return (
            <div>
                <Header/>
                <Main/>
            </div>
        )
    }
}
ReactDOM.render(<Page/>,document.querySelector('#root'));

在构造函数调用 super 并将 props 作为参数传入的作用

在调用 super() 方法之前，子类构造函数无法使用this引用，ES6 子类也是如此。
将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props

传递了props

class MyComponent extends React