转载自 https://github.com/semlinker/reactjs-interview-questions#core-react
1 React有哪些特点
— 考虑到真实dom的操作成本很高，所以他采用的是虚拟dom，而不是真实的dom
— 支持服务器渲染
— 遵循单向数据流或者数据绑定
— 使用可复用/可组合的 UI组件开发视图
2 什么是 JSX?
JSX是js的一种扩展语言，似HTML但是又不是HTML，因为JSX中还能进行运算，判断，加入一些js语言等，jsx是为react.creactElement（）提供的语法糖,
3 元素和组件的区别
元素是用来展现一个DOM或者组件的简单js对象，它不需要状态变化，创建成本比较低
组件是类或者函数，他将props作为输入，然后返回一个元素的树形结构，作为输出
4 如何在 React 中创建组件?
-—最简单的方式是 创建函数组件，他的第一个参数接收props，返回一个react元素
function Greeting({ message }) {
return <h1>{`Hello, ${message}`}</h1>
}
— 稍微复杂点的方法是 使用ES6类来定义组件
class Greeting extends React.Component {
render() {
return <h1>{`Hello, ${this.props.message}`}</h1>
}
}
5 何时使用类组件和函数组件?
如果组件需要使用状态或者生命周期函数则使用类组件
如果组件不需要，则使用函数组件
6 什么是 Pure Components?
react.Purecomponent 和react.component完全相同，只是它为你处理了shouldComponentUpdata（）方法，每当属性或者状态发生改变时，Purecomponent 将属性和状态进行浅比较。
另一方面，一般的组件不会将当前的属性和状态与新的属性和状态进行比较。因此，在默认情况下，每当调用 shouldComponentUpdate 时，默认返回 true，所以组件都将重新渲染。
7 React 的状态是什么?
状态是一个对象，它包含某些信息，是组件的私有信息，别的组件无法直接访问他。当状态被改变时，会触发render（）函数重新渲染。
8 React 中的 props 是什么?
props是一组对象，包含了父组件传给子组件的数据，路由和组件的一些信息，它是不可变的
作用：
— 触发状态的改变
— 将自定义数据传递给子组件
— 调用this.props.react属性（）调用函数，比如路由跳转
9 我们为什么不能直接更新状态?
直接更新状态不会触发render（）重新渲染，正确方式是使用setstate（）函数更改状态，组件将会重新渲染
10 回调函数作为 setState() 参数的目的是什么?
当setState完成状态更改和组件渲染之后，回调函数会被调用，由于setState是异步的，回调函数用于后续的操作
11 HTML 和 React 事件处理有什么区别?
— html中事件名必须小写onclick，但是在react中遵循驼峰写法 比如onClick
— 在html中可以返回false阻止默认行为，但是在react中要明确的调用preventDefault()
html
<a href='#' onclick='console.log("The link was clicked."); return false;' />
react
function handleClick(event) {
event.preventDefault()
console.log('The link was clicked.')
}
12 如何在 JSX 回调中绑定方法或事件处理程序?
1 使用this.bind(this)
this.handleClick = this.handleClick.bind(this)
2下载 “ 'react-autobind‘’,省略掉bind(this)
使用
import autoBind from 'react-autobind';
onClick={this.click}
click(){
}
3 使用箭头函数,keyi绑定
<button onClick={(event) => this.handleClick(event)}>
{'Click me'}
</button>
13 如何将参数传递给事件处理程序或回调函数?
1 使用箭头函数来传递参数
<button onClick={() => this.handleClick(id)} />
2 调用bind传递参数
<button onClick={this.handleClick.bind(this, id)} />
14 如何将参数传递给事件处理程序或回调函数?
15 什么是内联条件表达式?
在 JSX 中嵌入任何表达式，方法是将它们用大括号括起来，然后再加上 JS 逻辑运算符 &&。
16 什么是 "key" 属性，在元素数组中使用它们有什么好处?
key 是一个特殊的字符串属性，创建元素数组时需要包含它，keys帮助react识别哪些元素已更改或者删除，或者添加
key值需要设置成唯一值，不能重复，不能为空，否则控制台会报错
17 ref有什么作用？
ref返回元素的引用，当你需要直接访问Dm元素或者组件的实例时，他可能非常有用
18 什么是Virtual DOM?
React中推荐的JSX语法，即是一种快捷创造ReactElement的方法。ReactElement即是Virtual DOM。
Virtual DOM是真实DOM的JavaScript对象描述。
这种使用JSON数据结构的形式描述，更加轻量级。
Diff算法，即是对这新旧两颗Virtual DOM进行计算，从而计算出它们之间的差异。最后再把这些差异渲染到真实的DOM中。通过这种方式，大大地减少了真实DOM操作，所以更高效、速度更快。
19 Virtual DOM 如何工作?
·1 当数据发生变化，比如setState时，会引起组件重新渲染，整个DOM树都会以virtual dom的形式重新渲染
2 然后收集差异也就是diff新的virtual dom和老的virtual dom的差异
3 比如增加节点、删除节点、移动节点更新到虚拟的DOM上，最后渲染到真实的DOM
20 什么是 React Fiber?
Fiber 是 React v16 中新的 reconciliation 引擎，或核心算法的重新实现。React Fiber 的目标是提高对动画，布局，手势，暂停，中止或者重用任务的能力及为不同类型的更新分配优先级，及新的并发原语等领域的适用性。
21 React Fiber 的主要目标是什么?
React Fiber 的目标是提高其在动画、布局和手势等领域的适用性。它的主要特性是 incremental rendering: 将渲染任务拆分为小的任务块并将任务分配到多个帧上的能力。
网友评论