文章目录- 一、react篇
- 1、react 生命周期函数
- 2、React类组件(Class component)和函数式组件(Functional component)之间有何不同
- 3、React状态(state)和属性(props)之间有何不同
- 4、什么是高阶组件
- 5、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
- 6、(在构造函数中)调用 super(props) 的目的是什么
- 7、React事件处理
- 8、React如何创建refs
- 9、什么是JSX
- 10、为什么不直接更新state状态
- 11、React中的这三个点（...）是做什么的
- 12、简单介绍下react hooks 产生的背景及 hooks的优点
- 13、 React hooks 怎么模拟生命周期
- 14、React 中的 `useState()` 是什么？
- 15、当调用setState时，React render 是如何工作的
- 16、React 中 key 的重要性是什么？
- 17、什么是Redux?
- 18、列出 Redux 的组件
- 19、Redux 有哪些优点？
- 20、常用的hooks
- 21、为什么浏览器无法阅读JSX？
- 22、什么是高阶成分（HOC）？
- 23、React的严格模式如何使用，有什么用处？
- 24、React中什么是受控组件和非控组件？
- 25、React和vue.js的相似性和差异性是什么？
- 26、React组件生命周期的不同阶段是什么？
- 27、详细解释React组件的生命周期方法。
- 28、什么是React中的合成事件？
- 29、使用箭头函数(arrow functions)的优点是什么
- 30、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
- 31、 (在构造函数中)调用 **super(props)** 的目的是什么
- 32、 React的工作原理
- 33、除了在构造函数中绑定 this ，还有其它方式吗
- 34、 何为 Children
- 35、 什么是属性代理
- 1、react 生命周期函数
- 2、React类组件(Class component)和函数式组件(Functional component)之间有何不同
- 3、React状态(state)和属性(props)之间有何不同
- 4、什么是高阶组件
- 5、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
- 6、(在构造函数中)调用 super(props) 的目的是什么
- 7、React事件处理
- 8、React如何创建refs
- 9、什么是JSX
- 10、为什么不直接更新state状态
- 11、React中的这三个点（...）是做什么的
- 12、简单介绍下react hooks 产生的背景及 hooks的优点
- 13、 React hooks 怎么模拟生命周期
- 14、React 中的 `useState()` 是什么？
- 15、当调用setState时，React render 是如何工作的
- 16、React 中 key 的重要性是什么？
- 17、什么是Redux?
- 18、列出 Redux 的组件
- 19、Redux 有哪些优点？
- 20、常用的hooks
- 21、为什么浏览器无法阅读JSX？
- 22、什么是高阶成分（HOC）？
- 23、React的严格模式如何使用，有什么用处？
- 24、React中什么是受控组件和非控组件？
- 25、React和vue.js的相似性和差异性是什么？
- 26、React组件生命周期的不同阶段是什么？
- 27、详细解释React组件的生命周期方法。
- 28、什么是React中的合成事件？
- 29、使用箭头函数(arrow functions)的优点是什么
- 30、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
- 31、 (在构造函数中)调用 **super(props)** 的目的是什么
- 32、 React的工作原理
- 33、除了在构造函数中绑定 this ，还有其它方式吗
- 34、 何为 Children
- 35、 什么是属性代理
一、react篇
1、react 生命周期函数
- 初始化阶段：
- getDefaultProps:获取实例的默认属性
- getInitialState:获取每个实例的初始化状态
- componentWillMount：组件即将被装载、渲染到页面上
- render:组件在这里生成虚拟的 DOM 节点
- componentDidMount:组件真正在被装载之后
- 运行中状态：
- componentWillReceiveProps:组件将要接收到属性的时候调用
- shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
- componentWillUpdate:组件即将更新不能修改属性和状态
- render:组件重新描绘
- componentDidUpdate:组件已经更新
- 销毁阶段：
- componentWillUnmount:组件即将销毁
2、React类组件(Class component)和函数式组件(Functional component)之间有何不同
- 类组件不仅允许使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态
- 当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 ‘无状态组件’，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件或展示组件
3、React状态(state)和属性(props)之间有何不同
- State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
- Props则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。
4、什么是高阶组件
高阶组件是一个以组件为参数并返回一个新组件的函数。最常见的就是是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。如果发现在不同的地方写了大量代码来做同一件事时，就可以用 HOC
5、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state
6、(在构造函数中)调用 super(props) 的目的是什么
在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便(在子类中能在 constructor 访问 this.props。
7、React事件处理
React中的事件处理程序将传递SyntheticEvent实例，该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面，除了它们在所有浏览器中的工作方式相同. React实际上并未将事件附加到子节点本身。React将使用单个事件侦听器在顶层侦听所有事件
8、React如何创建refs
Refs 是使用 React.createRef() 方法创建的，并通过
ref属性添加到 React 元素上
9、什么是JSX
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX
10、为什么不直接更新state状态
如果直接更新state状态，那么它将不会重新渲染组件，而是使用
setState()方法。它计划对组件状态对象的更新。状态改变时，组件通过重新渲染做出响应
11、React中的这三个点（…）是做什么的
扩展传值符号，是把对象或数组里的每一项展开，是属于ES6的语法
12、简单介绍下react hooks 产生的背景及 hooks的优点
hooks是针对在使用react时存在以下问题而产生的：
组件之间复用状态逻辑很难，在hooks之前，实现组件复用，一般采用高阶组件和 Render Props，它们本质是将复用逻辑提升到父组件中，很容易产生很多包装组件，带来嵌套地域。
组件逻辑变得越来越复杂，尤其是生命周期函数中常常包含一些不相关的逻辑，完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
复杂的class组件，使用class组件，需要理解 JavaScript 中 this 的工作方式，不能忘记绑定事件处理器等操作，代码复杂且冗余。除此之外，class组件也会让一些react优化措施失效。
针对上面提到的问题，react团队研发了hooks，它主要有两方面作用：
用于在函数组件中引入状态管理和生命周期方法
取代高阶组件和render props来实现抽象和可重用性
优点也很明显：
避免在被广泛使用的函数组件在后期迭代过程中，需要承担一些副作用，而必须重构成类组件，它帮助函数组件引入状态管理和生命周期方法。
Hooks 出现之后，我们将复用逻辑提取到组件顶层，而不是强行提升到父组件中。这样就能够避免 HOC 和 Render Props 带来的「嵌套地域」
避免上面陈述的class组件带来的那些问题
13、 React hooks 怎么模拟生命周期
1、模拟componentDidMount
useEffect(()=>{console.log(‘第一次渲染时调用’)},[])
2、模拟componentDidUpdate
没有第二个参数代表监听所有的属性更新
useEffect(()=>{console.log(‘任意属性该改变’)})
同时监听多个属性的变化需要将属性作为数组传入第二个参数。
useEffect(()=>{console.log(‘n变了’)},[n,m])
3、模拟componentWillUnmount
代码语言：javascript复制useEffect(()=>{
const timer = setTimeout(()=>{
...
},1000)
return()=>{
console.log('组件销毁')
clearTimerout(timer)
}
})14、React 中的 useState() 是什么？
useState是react hooks中最常用且用法最简单的一个hook。useState(0) 返回一个元组，其中第一个参数count是计数器的当前状态，setCounter 提供更新计数器状态的方法。
15、当调用setState时，React render 是如何工作的
虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentUpdate总是返回true，所以默认情况下 React 是没有优化的。 原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。
16、React 中 key 的重要性是什么？
key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能
17、什么是Redux?
Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为
18、列出 Redux 的组件
- Action – 这是一个用来描述发生了什么事情的对象。
- Reducer – 这是一个确定状态将如何变化的地方。
- Store – 整个程序的状态/对象树保存在Store中。
- View – 只显示 Store 提供的数据
19、Redux 有哪些优点？
Redux 的优点如下：
结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。 可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。 服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。 开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。 社区和生态系统 - Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。 易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。 组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单
20、常用的hooks
useState：定义state的数据，参数是初始化的数据，返回值两个值1. 初始化值，2. 修改的方法
useEffect：副作用函数，顾名思义，副作用即只有使用过后才会产生副作用
当作生命周期来使用： 第二个参数如果没写的话，页面一更新触发，compoentDidMount compoentDidUpdate
第二个参数如果空数组的话，只执行一次，compoentDidMount
数组中跟某些变量，当作监听器来使用，监听数据的变化，
useEffect是一个副作用函数，组件更新完成后触发的函数
如果我们在useEffect 返回一个函数的，组件被销毁的时候触发
useMemo：用来计算数据，返回一个结果，监听数据的变化，第二个参数就是监听的数据，具有缓存性
useMemo和useEffect 相比较来说，useMemo 是组件更新的时候触发生命周期
useMemo是怎么做性能优化的？
当父组件向子组件组件通信的时候，父组件中数据发生改变，更新父组件导致子组件的更新渲染，但是如果修改的数据跟子组件无关的话，更新子组件会导致子组件不必要的DOM渲染，是比较消耗性能的，这个时候我们可以使用useMemo或者memo做组件的缓存，减少子组件不必要的DOM渲染
useCallback：当父组件向子组件传递函数的时候，父组件的改变会导致函数的重新调用产生新的作用域，所以还是会导致子组件的更新渲染，这个时候我们可以使用useCallback来缓存组件
useRef：相当于createRef的使用，创建组件的属性信息
useContext：相当在函数组件中获取context状态数的内容信息
useReducer：useReducer是用来弥补useState的补不足， 可以把数据进行集中式的管理，单独处理数据的逻辑信息
21、为什么浏览器无法阅读JSX？
浏览器只能读取JavaScript对象，而不能读取普通JavaScript对象中的JSX。因此，要使浏览器能够读取JSX，首先，我们需要使用Babel之类的JSX转换器将JSX文件转换为JavaScript对象，然后将其传递给浏览器。
22、什么是高阶成分（HOC）？
高阶组件是重用组件逻辑的高级方法。基本上，这是从React的组成性质衍生的模式。HOC是自定义组件，在其中包裹了另一个组件。他们可以接受任何动态提供的子组件，但不会修改或复制其输入组件中的任何行为。您可以说HOC是“纯”组件。
23、React的严格模式如何使用，有什么用处？
StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
24、React中什么是受控组件和非控组件？
（1）受控组件 在使用表单来收集用户输入时，例如等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方式消除了组件的局部状态，使整个状态可控。react官方推荐使用受控表单组件。
受控组件更新state的流程：
可以通过初始state中设置表单的默认值 每当表单的值发生变化时，调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态，并更新组件的state 一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新 受控组件缺陷： 表单元素的值都是由React组件进行管理，当有多个输入框，或者多个这种组件时，如果想同时获取到全部的值就必须每个都要编写事件处理函数，这会让代码看着很臃肿，所以为了解决这种情况，出现了非受控组件。
（2）非受控组件 如果一个表单组件没有value props（单选和复选按钮对应的是checked props）时，就可以称为非受控组件。在非受控组件中，可以使用一个ref来从DOM获得表单值。而不是为每个状态更新编写一个事件处理程序。
25、React和vue.js的相似性和差异性是什么？
相似性如下。 （1）都是用于创建UI的 JavaScript库。 （2）都是快速和轻量级的代码库（这里指 React核心库）。 （3）都有基于组件的架构。 （4）都使用虚拟DOM。 （5）都可以放在单独的HTML文件中，或者放在 Webpack设置的一个更复杂的模块中。 （6）都有独立但常用的路由器和状态管理库。 它们最大的区别在于 Vue. js通常使用HTML模板文件，而 React完全使用 JavaScript创建虚拟DOM。 Vue. js还具有对于“可变状态”的“ reactivity”的重新渲染的自动化检测系统。
26、React组件生命周期的不同阶段是什么？
React组件的生命周期分为三个不同的阶段： 初始呈现阶段：这是组件即将开始其生命旅程并到达DOM的阶段。 更新阶段：一旦将组件添加到DOM中，它可能只在发生道具或状态更改时才更新和重新呈现。 这只发生在这个阶段。 卸载阶段：这是组件生命周期的最后一个阶段，在这个阶段组件被销毁并从DOM中删除。
27、详细解释React组件的生命周期方法。
一些最重要的生命周期方法是： componentWillMount()——在呈现之前在客户端和服务器端执行。 componentDidMount()——仅在第一次呈现之后在客户端执行。 componentWillReceiveProps()——在从父类接收到道具并调用另一个呈现之前调用。 shouldComponentUpdate()——根据某些条件返回真值或假值。 如果希望组件更新，则返回true，否则返回false。 默认情况下，它返回false。 componentWillUpdate()——在DOM中进行呈现之前调用。 componentDidUpdate()——在呈现发生后立即调用。 componentWillUnmount()——在从DOM卸载组件后调用
28、什么是React中的合成事件？
合成事件是充当浏览器原生事件的跨浏览器包装器的对象。 它们将不同浏览器的行为合并到一个API中。 这样做是为了确保事件在不同的浏览器之间显示一致的属性。
29、使用箭头函数(arrow functions)的优点是什么
作用域安全：在箭头函数之前，每一个新创建的函数都有定义自身的 this 值(在构造函数中是
新对象；在严格模式下，函数调用中的 this 是未定义的；如果函数被称为“对象方法”，则为基
础对象等)，但箭头函数不会，它会使用封闭执行上下文的 this 值。
简单：箭头函数易于阅读和书写
清晰：当一切都是一个箭头函数，任何常规函数都可以立即用于定义作用域。开发者总是可以查找
next-higher 函数语句，以查看 this 的值
30、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。
31、 (在构造函数中)调用 super(props) 的目的是什么
在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调
用 super() 。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问
this.props 。
32、 React的工作原理
React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 “diffing”
算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。
33、除了在构造函数中绑定 this ，还有其它方式吗
你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持
的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。
34、 何为 Children
在JSX表达式中，一个开始标签(比如 )和一个关闭标签(比如 )之间的内容会作为一个特殊的属性
props.children 被自动传递给包含着它的组件。
35、 什么是属性代理
属性代理组件继承自React.Component，通过传递给被包装的组件props得名
diff 的结果来更新 DOM。
