React面试题

React 中 keys 的做用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

1 2 3 4 5 6 7 8 9

render () {   return (     <ul>       {this.state.todoItems.map(({item, key}) => {         return <li key={key}>{item}</li>       })}     </ul>   ) }

在开发过程当中，咱们须要保证某个元素的 key 在其同级元素中具备惟一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近建立的仍是被移动而来的元素，从而减小没必要要的元素重渲染。此外，React 还须要借助 Key 值来判断元素与本地状态的关联关系，所以咱们毫不可忽视转换函数中 Key 的重要性。

调用 setState 以后发生了什么？

在代码中调用 setState 函数以后，React 会将传入的参数对象与组件当前的状态合并，而后触发所谓的调和过程（Reconciliation）。通过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树而且着手从新渲染整个 UI 界面。在 React 获得元素树以后，React 会自动计算出新的树与老树的节点差别，而后根据差别对界面进行最小化重渲染。在差别计算算法中，React 可以相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是所有从新渲染。

react 生命周期函数

• 初始化阶段：
  • getDefaultProps:获取实例的默认属性
  • getInitialState:获取每一个实例的初始化状态
  • componentWillMount：组件即将被装载、渲染到页面上
  • render:组件在这里生成虚拟的 DOM 节点
  • componentDidMount:组件真正在被装载以后
• 运行中状态：
  • componentWillReceiveProps:组件将要接收到属性的时候调用
  • shouldComponentUpdate:组件接受到新属性或者新状态的时候（能够返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
  • componentWillUpdate:组件即将更新不能修改属性和状态
  • render:组件从新描绘
  • componentDidUpdate:组件已经更新
• 销毁阶段：
  • componentWillUnmount:组件即将销毁

shouldComponentUpdate 是作什么的，（react 性能优化是哪一个周期函数？）

shouldComponentUpdate 这个方法用来判断是否须要调用 render 方法从新描绘 dom。由于 dom 的描绘很是消耗性能，若是咱们能在 shouldComponentUpdate 方法中可以写出更优化的 dom diff 算法，能够极大的提升性能。

 

为何虚拟 dom 会提升性能?(必考)

虚拟 dom 至关于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操做，从而提升性能。

用 JavaScript 对象结构表示 DOM 树的结构；而后用这个树构建一个真正的 DOM 树，插到文档当中当状态变动的时候，从新构造一棵新的对象树。而后用新的树和旧的树进行比较，记录两棵树差别把 2 所记录的差别应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

 

react diff 原理（常考，大厂必考）

• 把树形结构按照层级分解，只比较同级元素。
• 给列表结构的每一个单元添加惟一的 key 属性，方便比较。
• React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
• 合并操做，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每个事件循环结束, React 检查全部标记 dirty 的 component 从新绘制.
• 选择性子树渲染。开发人员能够重写 shouldComponentUpdate 提升 diff 的性能。

 

React 中 refs 的做用是什么？

Refs 是 React 提供给咱们的安全访问 DOM 元素或者某个组件实例的句柄。咱们能够为元素添加 ref 属性而后在回调函数中接受该元素在 DOM 树中的句柄，该值会做为回调函数的第一个参数返回：

 

 

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

class CustomForm extends Component {   handleSubmit = () => {     console.log("Input Value: ", this.input.value)   }   render () {     return (       <form onSubmit={this.handleSubmit}>         <input           type='text'           ref={(input) => this.input = input} />         <button type='submit'>Submit</button>       </form>     )   } }

上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，咱们将其绑定到 this 指针以便在其余的类函数中使用。另外值得一提的是，refs 并非类组件的专属，函数式组件一样可以利用闭包暂存其值：

 

 

1 2 3 4 5 6 7 8 9 10 11

function CustomForm ({handleSubmit}) {   let inputElement   return (     <form onSubmit={() => handleSubmit(inputElement.value)}>       <input         type='text'         ref={(input) => inputElement = input} />       <button type='submit'>Submit</button>     </form>   ) }

若是你建立了相似于下面的 Twitter 元素，那么它相关的类定义是啥样子的？

 

 

1 2 3 4 5

<Twitter username='tylermcginnis33'>   {(user) => user === null     ? <Loading />     : <Badge info={user} />} </Twitter>

 

 

1 2 3 4 5 6 7

import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' // fetchUser take in a username returns a promise // which will resolve with that username's data. class Twitter extends Component {   // finish this }

若是你还不熟悉回调渲染模式（Render Callback Pattern），这个代码可能看起来有点怪。这种模式中，组件会接收某个函数做为其子组件，而后在渲染函数中以 props.children 进行调用：

 

 

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

import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' class Twitter extends Component {   state = {     user: null,   }   static propTypes = {     username: PropTypes.string.isRequired,   }   componentDidMount () {     fetchUser(this.props.username)       .then((user) => this.setState({user}))   }   render () {     return this.props.children(this.state.user)   } }

这种模式的优点在于将父组件与子组件解耦和，父组件能够直接访问子组件的内部状态而不须要再经过 Props 传递，这样父组件可以更为方便地控制子组件展现的 UI 界面。譬如产品经理让咱们将本来展现的 Badge 替换为 Profile，咱们能够轻易地修改下回调函数便可：

 

 

1 2 3 4 5

<Twitter username='tylermcginnis33'>   {(user) => user === null     ? <Loading />     : <Profile info={user} />} </Twitter>

展现组件(Presentational component)和容器组件(Container component)之间有何不一样

• 展现组件关心组件看起来是什么。展现专门经过 props 接受数据和回调，而且几乎不会有自身的状态，但当展现组件拥有自身的状态时，一般也只关心 UI 状态而不是数据的状态。
• 容器组件则更关心组件是如何运做的。容器组件会为展现组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其做为回调提供给展现组件。容器组件常常是有状态的，由于它们是(其它组件的)数据源。

类组件(Class component)和函数式组件(Functional component)之间有何不一样

• 类组件不只容许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态
• 当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 ‘无状态组件(stateless component)’，可使用一个纯函数来建立这样的组件。这种组件也被称为哑组件(dumb components)或展现组件

(组件的)状态(state)和属性(props)之间有何不一样

• State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是做为用户事件行为的结果。
• Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，而且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，可是能够把其子组件的 props 放在一块儿(统一管理)。Props 也不只仅是数据–回调函数也能够经过 props 传递。

何为受控组件(controlled component)

在HTML 中，相似 <input>, <textarea> 和 <select> 这样的表单元素会维护自身的状态，并基于用户的输入来更新。当用户提交表单时，前面提到的元素的值将随表单一块儿被发送。但在 React 中会有些不一样，包含表单元素的组件将会在 state 中追踪输入的值，而且每次调用回调函数时，如 onChange 会更新 state，从新渲染组件。一个输入表单元素，它的值经过 React 的这种方式来控制，这样的元素就被称为”受控元素”。

何为高阶组件(higher order component)

高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最多见的多是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。若是你发现你在不一样的地方写了大量代码来作同一件事时，就应该考虑将代码重构为可重用的 HOC。

为何建议传递给 setState 的参数是一个 callback 而不是一个对象

由于 this.props 和 this.state 的更新多是异步的，不能依赖它们的值去计算下一个 state。

除了在构造函数中绑定 this，还有其它方式吗

你可使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可使用箭头函数，但问题是每次组件渲染时都会建立一个新的回调。

(在构造函数中)调用 super(props) 的目的是什么

在 super() 被调用以前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的缘由则是便于(在子类中)能在 constructor 访问 this.props。

应该在 React 组件的何处发起 Ajax 请求

在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载以前 Ajax 请求已经完成，若是是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起做用。在 componentDidMount 中发起网络请求将保证这有一个组件能够更新了。

描述事件在 React 中的处理方式。

为了解决跨浏览器兼容性问题，您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 的浏览器本机事件的跨浏览器包装器。

这些 SyntheticEvent 与您习惯的原生事件具备相同的接口，除了它们在全部浏览器中都兼容。有趣的是，React 实际上并无将事件附加到子节点自己。React 将使用单个事件监听器监听顶层的全部事件。这对于性能是有好处的，这也意味着在更新 DOM 时，React 不须要担忧跟踪事件监听器。

createElement 和 cloneElement 有什么区别？

React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。它接受三个参数，第一个参数能够是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及以后的参数，皆做为组件的子组件。

 

 

1 2 3 4 5

React.createElement(     type,     [props],     [...children] )

React.cloneElement()与 React.createElement()类似，不一样的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而就的子元素奖杯替换。

 

 

1 2 3 4 5

React.cloneElement(   element,   [props],   [...children] )

React 中有三种构建组件的方式

React.createClass()、ES6 class 和无状态函数。

react 组件的划分业务组件技术组件？

• 根据组件的职责一般把组件分为 UI 组件和容器组件。
• UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
• 二者经过 React-Redux 提供 connect 方法联系起来。

简述 flux 思想

Flux 的最大特色，就是数据的”单向流动”。

1. 用户访问 View
2. View 发出用户的 Action
3. Dispatcher 收到 Action，要求 Store 进行相应的更新
4. Store 更新后，发出一个”change”事件
5. View 收到”change”事件后，更新页面

React 项目用过什么脚手架（本题是开放性题目）

creat-react-app Yeoman 等

了解 redux 么，说一下 redux 把

• redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工做流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操做，view 经过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操做的，有四个组成部分 action，dispatch，view，store，工做流程是 view 发出一个 action，派发器接收 action，让 store 进行数据更新，更新完成之后 store 发出 change，view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个能够改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，可是在 redux 中只能定义一个可更新状态的 store，redux 把 store 和 Dispatcher 合并,结构更加简单清晰
• 新增 state,对状态的管理更加明确，经过 redux，流程更加规范了，减小手动编码量，提升了编码效率，同时缺点时当数据更新时有时候组件不须要，可是也要从新绘制，有些影响效率。通常状况下，咱们在构建多交互，多数据流的复杂项目应用时才会使用它们

redux 有什么缺点

• 一个组件所须要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取。
• 当一个组件相关数据更新时，即便父组件不须要用到这个组件，父组件仍是会从新 render，可能会有效率影响，或者须要写复杂的 shouldComponentUpdate 进行判断。