字节前端面试被问到的react问题

redux中间件

中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能

• redux-logger：提供日志输出
• redux-thunk：处理异步操作
• redux-promise：处理异步操作，actionCreator的返回值是promise

React中refs的作用是什么？有哪些应用场景？

Refs 提供了一种方式，用于访问在 render 方法中创建的 React 元素或 DOM 节点。Refs 应该谨慎使用，如下场景使用 Refs 比较适合：

• 处理焦点、文本选择或者媒体的控制
• 触发必要的动画
• 集成第三方 DOM 库

Refs 是使用 React.createRef() 方法创建的，他通过 ref 属性附加到 React 元素上。要在整个组件中使用 Refs，需要将 ref 在构造函数中分配给其实例属性：

class MyComponent extends React.Component {
   
  constructor(props) {
   
    super(props)
    this.myRef = React.createRef()
  }
  render() {
   
    return <div ref={
   this.myRef} />
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

由于函数组件没有实例，因此不能在函数组件上直接使用 ref：

function MyFunctionalComponent() {
   
  return <input />;
}
class Parent extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.textInput = React.createRef();
  }
  render() {
   
    // 这将不会工作！
    return (
      <MyFunctionalComponent ref={
   this.textInput} />
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

但可以通过闭合的帮助在函数组件内部进行使用 Refs：

function CustomTextInput(props) {
   
  // 这里必须声明 textInput，这样 ref 回调才可以引用它
  let textInput = null;
  function handleClick() {
   
    textInput.focus();
  }
  return (
    <div>
      <input
        type="text"
        ref={
   (input) => {
    textInput = input; }} />      <input
        type="button"
        value="Focus the text input"
        onClick={
   handleClick}
      />
    </div>
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21