React 常见问题

QAs

1. 有那些使用React的常识？

1. 小写字母开头的组件会被当作原生组件，大写开头则代表React组件 参考
2. function定义的组件为无状态组件/功能组件，书写简洁；class方式定义的为状态组件/容器组件。
3. 高阶组件是一个函数，接受组件和参数，返回新的组件。
4. 容器组件起到组织高级-低级功能的作用；高阶组件，可以当作带参数的容器组件。

2. React类中的方法为什么需要bind(this)？

但是如果将React.Component类方法传递给全局变量、赋值给onClick的回调函数，会改写它们指向的this。通过bind(this)相当于将函数的this固化了。一种变通方法是直接使用 onClick={() => this.handleClick(); } 就可以不用进行 bind(this)。

this的指向分为：指向所在对象、指向定义所在上下文。
这个 所在对象 可能是一个具体的对象，也可能是全局执行上下文window，函数作为对象方法时所在对象就是该对象，直接声明函数时候所在对象就是window。

通过箭头函数声明的函数，this指向的是定义所在上下文，并且无法通过call/bind/apply方法来修改this的指向。

DOM事件处理中，如果直接将处理函数作为handler，handler的this会被篡改成事件绑定的DOM对象上；在React中，this会被篡改为undefined。

假定在React组建的render函数中：

1）通过 普通函数 声明了一个对象，在调用位置不管你是采用 onClick={fn} 还是 onClick={() => { fn(); }} ，fn的执行指向都是undefined。

2）通过 箭头函数 声明了一个对象，在调用位置不管你是采用 onClick={fn} 还是 onClick={() => { fn(); }}this都能指向到所在组件。

参考：

• https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

3. React构造函数中，super(props)是否必要？

如果有state赋值或函数的bind(this)必定要会有constructor，有constructor就必须有super调用，否则会报错，此属于ES6的Class extend语法的检查；super()中写不写props则根据实际是否有值传入而定，有传入而不写props则会导致this.props访问不到。

参考：

• https://zh-hans.reactjs.org/docs/react-component.html
• https://es6.ruanyifeng.com/#docs/class-extends

4. React的组件有哪些分类方式？

在React中创建组件的方式有三种：

1. 通过ES5 React.createClass；
2. function方式；
3. class方式

无状态组件：就是通过function定义的组件，没有states，只有props，书写简洁，又叫 展示组件。
状态组件：是包含state属性的组件，可以通过createClass和class方式定义，需要维护自己数据，又称 容器组件。

5. React组件的异步更新？

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

https://react.docschina.org/docs/state-and-lifecycle.html

所以它对我们使用有什么影响：

• 已知的，要setState在callback中去获取新的值，而不是在setState的下面一行代码。
• 文档中给出了这么一种用法，其实不是很理解

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

  6. React的高阶组件？

  高阶组件，是一个函数，接受组件和参数，返回新的组件。

例如，要在界面中增加计时器的展示，高阶组件接受不同组件，为返回组件增加和计时器相关的参数
例如，评论列表 和 文章列表，高阶组件接收不同组件 和 各自的数据源头，高阶组件请求数据，封装在state.data，然后传给传入的组件中

7. React组件抽象涉及哪些知识点？

父亲组件传递属性/方法给子组件

子组件可以通过this.props.propName或this.props.methodName进行引用或调用；

父组件想引用子组件

则通过在构造函数中定义 this.childRef = React.createRef(); 在jsx中申明 <child ref=”this.childRef”； 在调用时通过this.childRef.current获取到组件实例对象。

8. 在State中定义ref会有什么问题？

state中的状态变更，是会直接同步到render中的。react设计就是为了让用户维护好state和props就好。

而还有一些时候用户是希望自己操控dom或子组件的，这时候使用refs就是流出来的后门。

因此本质上 state 和 refs 是截然不同的两种使用范式。

尽管在应用中通过如下代码也能使用，但是不知道它可能导致什么样的问题（就下面互相触发的逻辑来看像循环）：

• state 更新后更新dom
• dom dom更新后，更新state.currentRef.current ```typescript this.state = { currentRef: react.createRef(), }

// …

{}