【React】精选5题
1. Redux 和 Vuex 有什么区别，它们有什么共同思想吗？
相同点
- state 共享数据
- 流程一致：定义全局state，触发，修改state
- 原理相似，通过全局注入store。
不同点
- 从实现原理上来说：
- Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
- Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的
- 从表现层来说：
- vuex定义了state、getter、mutation、action四个对象；redux定义了state、reducer、action。
- vuex中state统一存放，方便理解；reduxstate依赖所有reducer的初始值
- vuex有getter,目的是快捷得到state；redux没有这层，react-redux mapStateToProps参数做了这个工作。
- vuex中mutation只是单纯赋值(很浅的一层)；redux中reducer只是单纯设置新state(很浅的一层)。他俩作用类似，但书写方式不同
- vuex中action有较为复杂的异步ajax请求；redux中action中可简单可复杂,简单就直接发送数据对象（{type:xxx, your-data}）,复杂需要调用异步ajax（依赖redux-thunk插件）。
- vuex触发方式有两种commit同步和dispatch异步；redux同步和异步都使用dispatch
通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变；取消了action概念，不必传入特定的 action形式进行指定变更；弱化reducer，基于commit参数直接对数据进行转变，使得框架更加简易;
共同思想
- 单一的数据源
- 变化可以预测
本质上∶ redux与vuex都是对mvvm思想的服务，将数据从视图中抽离的一种方案。
另一种回答：
区别：
-
生态系统：Redux 是为 React 应用设计的状态管理库，而 Vuex 是为 Vue 应用设计的状态管理库。它们都有自己的生态系统，包括与它们配套使用的中间件、开发工具和相关的第三方库。
-
语法和用法：Redux 使用纯 JavaScript，通过创建 action 和 reducer 来管理状态。而 Vuex 使用 Vue.js 的语法，利用 Vue.js 的响应式系统来管理状态。
-
架构设计：Redux 的设计包括单一数据源和不可变的状态，使用纯函数的方式来更新状态。而 Vuex 的设计也是基于单一数据源和不可变的状态，但它利用了 Vue.js 的响应式系统来实现状态的更新。
共同思想：
-
单一数据源：Redux 和 Vuex 都倡导将应用的状态存储在单一的数据源中，通过一个状态树来管理应用的各个组件的状态。这样可以使状态变化更可追踪、更可控。
-
不可变状态：Redux 和 Vuex 都鼓励使用不可变的数据结构来管理状态，即不直接修改原有状态，而是通过创建新的状态对象来更新状态。这样可以确保状态的可预测性和追踪性。
-
统一的状态更新方式：Redux 和 Vuex 都使用 action 来描述状态的更改，通过 reducer 函数来处理 action 并更新状态。这样可以使状态的更改过程可预测和一致。
综上所述，Redux 和 Vuex 在语法、用法和生态系统方面存在一些差异，但它们都遵循了单一数据源、不可变状态和统一的状态更新方式等共同的思想。这些共同思想使得它们适用于复杂应用的状态管理，并提供了可追踪、可预测和可控的状态管理机制。
2. react 和 vue 有什么区别？
React 和 Vue 是两个流行的前端框架，它们有以下区别和相同点：
区别：
- 数据流：
在 Vue 中，数据流是双向的，这意味着数据可以从父组件向子组件传递，同时也可以从子组件向父组件传递。Vue 提供了 v-model 指令来实现双向绑定，它可以将表单元素的值与父组件的数据进行双向绑定。
例如，在 Vue 中，我们可以通过 v-model 来实现子组件的双向绑定：
<template>
<input v-model="value">
</template>
在这个示例中，父组件可以通过使用 v-model 来将 value 数据绑定到子组件的输入框，并且子组件对输入框的修改也会同步更新父组件的数据。
在 React 中，数据的流动是单向的，通过 props 将数据从父组件传递到子组件，子组件不能直接修改父组件的数据。如果子组件需要修改父组件的数据，可以通过回调函数或事件处理程序的方式将子组件中的变化通知给父组件。
-
语法和模板：
React 使用 JSX 语法，将组件的结构和逻辑都写在 JavaScript 代码中。Vue 使用基于 HTML 的模板语法，将组件的结构和逻辑都写在模板中，并且支持模板中的指令和表达式。 -
组件化开发：
React 使用函数或类来定义组件，组件的状态管理和生命周期通过组件的状态和生命周期钩子函数来实现。
在 Vue 中，可以使用 Vue 的模板语法来创建组件，这是 Vue 特有的方式。Vue 的模板语法允许我们在模板中定义组件的结构和逻辑，包括数据绑定、指令、事件处理等。
例如，在 Vue 中，我们可以使用以下方式创建一个组件：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="updateMessage">Update</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue",
};
},
methods: {
updateMessage() {
this.message = "Updated message";
},
},
};
</script>
在这个示例中，我们使用 Vue 的模板语法来定义组件的结构和逻辑，通过 data 属性来定义组件的初始数据，通过 methods 属性来定义组件的方法。
-
响应式系统：
React 使用虚拟 DOM 和 diff 算法来实现高效的更新，通过 setState 来触发组件的重新渲染。Vue 使用响应式系统，基于 Object.defineProperty 或 Proxy 来追踪数据的变化，并自动更新组件。 -
生态系统：
React 有一个庞大的生态系统，包括丰富的第三方库和工具，如 Redux、React Router、React Native 等。Vue 也有自己的生态系统，包括 Vuex、Vue Router、Vue CLI 等，同时也可以方便地使用第三方库。 -
学习曲线：
React 的学习曲线较陡峭，需要熟悉 JSX 语法和函数式编程的概念，同时需要掌握一些额外的库和工具。Vue 的学习曲线相对较平缓，语法简洁明了，更容易上手。
相同点：
组件化开发：React 和 Vue 都采用组件化的开发方式，将应用拆分成多个独立、可复用的组件，使得代码结构更清晰、可维护性更高。
虚拟 DOM：React 和 Vue 都使用虚拟 DOM 来进行高效的渲染和更新，通过比较虚拟 DOM 的差异来最小化真实 DOM 的操作，提高性能。
社区和支持：React 和 Vue 都拥有强大的社区支持，有许多活跃的开发者和资源可用，可以解决问题、分享经验和提供帮助。
总结来说，React 和 Vue 在语法、组件化开发、响应式系统、生态系统、学习曲线和社区支持等方面存在一些差异。然而，它们都有相同点，比如采用组件化开发、单向数据流、虚拟 DOM 和具有强大的社区支持等。选择使用哪个框架取决于项目需求、团队经验和个人偏好。无论选择哪个框架，它们都提供了强大的工具和机制来构建现代的、高性能的前端应用。
3. react中，父子组件的生命周期执行顺序是怎么样的？
在 React 中，父组件和子组件的生命周期方法的执行顺序如下：
父组件的生命周期方法执行顺序：
constructor
static getDerivedStateFromProps
render
componentDidMount
componentDidUpdate
componentWillUnmount
子组件的生命周期方法执行顺序：
constructor
static getDerivedStateFromProps
render
componentDidMount
componentDidUpdate
componentWillUnmount
具体的执行顺序如下：
挂载阶段：
父组件的 constructor
父组件的 static getDerivedStateFromProps
父组件的 render
子组件的 constructor
子组件的 static getDerivedStateFromProps
子组件的 render
子组件的 componentDidMount
父组件的 componentDidMount
更新阶段：
- 子组件修改自身state
子组件 getDerivedStateFromProps
子组件 shouldComponentUpdate
子组件 render
子组件 getSnapShotBeforeUpdate
子组件 componentDidUpdate - 父组件修改props
父组件 getDerivedStateFromProps
父组件 shouldComponentUpdate
父组件 render
子组件 getDerivedStateFromProps
子组件 shouldComponentUpdate
子组件 render
子组件 getSnapShotBeforeUpdate
父组件 getSnapShotBeforeUpdate
子组件 componentDidUpdate
父组件 componentDidUpdate
卸载阶段：
父组件的 componentWillUnmount
子组件的 componentWillUnmount
4. 为什么不能在循环、条件或嵌套函数中调用 Hooks？
在 React 中，Hooks 是用于在函数组件中引入和使用 React 特性的特殊函数。Hooks 遵循一些特定的规则，其中一个重要的规则是它们只能在函数组件的最顶层使用，不能在循环、条件或嵌套函数中调用。
这是因为 React 的 Hooks 机制依赖于 Hooks 在每次渲染中的调用顺序是固定的。这个顺序对于 React 来说是非常重要的，因为它能确保 Hooks 的状态和数据与组件的渲染一致。
如果在循环、条件或嵌套函数中调用 Hooks，那么每次渲染的 Hooks 调用顺序可能会发生改变，从而导致状态和数据的混乱。这会破坏 Hooks 的一致性，可能导致意外的错误和行为。
为了遵循 Hooks 的规则，可以通过将循环、条件或嵌套函数中的逻辑提取到自定义的 Hook 中来解决。这样可以确保在自定义 Hook 中使用 Hooks，而在函数组件中则可以正常使用自定义 Hook。
总之，为了保持 Hooks 的正常运行和一致性，应该遵循在函数组件的最顶层使用 Hooks 的规则，避免在循环、条件或嵌套函数中调用 Hooks。
5. 说说你对 useContext 的理解?
useContext 是 React 提供的一个 Hook，用于在函数组件中使用上下文（Context）。
上下文是 React 中一种跨组件层级共享数据的机制。通过使用上下文，可以在组件树中的任何位置传递数据，而无需手动将数据逐层传递给每个子组件。
useContext 接收一个上下文对象（由 React.createContext 创建），并返回当前上下文的值。这使得我们可以在函数组件中访问和使用上下文的值。
使用 useContext 的基本步骤如下：
首先，在创建上下文时，使用 React.createContext 创建一个上下文对象，并通过 Provider 组件提供要共享的数据。例如：const MyContext = React.createContext()
在父组件中，使用 Provider 组件将要共享的数据传递给子组件。例如：
在子组件中，使用 useContext 钩子来访问上下文的值。例如：const value = useContext(MyContext)
通过 useContext，我们可以轻松地在函数组件中访问上下文的值，避免了传递 props 或使用其他状态管理库的复杂性。它提供了一种简洁和方便的方式来共享和使用上下文数据。
需要注意的是，useContext 只能在函数组件的顶层调用，不能在循环、条件或嵌套函数中调用。这是因为 useContext 依赖于 React 的渲染过程，需要确保 Hooks 的调用顺序是固定的。
详细的 useContext 的使用步骤如下：
- 创建上下文对象：使用 React.createContext() 创建一个上下文对象。例如：
const MyContext = React.createContext();
- 提供共享数据：在父组件中使用上下文对象的 Provider 组件来提供共享的数据。例如：
function ParentComponent() {
const someValue = "Hello, useContext!";
return (
<MyContext.Provider value={someValue}>
<ChildComponent />
</MyContext.Provider>
);
}
- 使用上下文数据：在子组件中，使用 useContext 来获取上下文的值。例如：
function ChildComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}
注意事项：
使用 useContext 之前，确保已经在顶层组件中使用了 MyContext.Provider 来提供共享数据。
可以在一个组件树中的多个组件中使用同一个上下文对象。
如果没有在父组件中提供 Provider，或者 Provider 的 value 没有被设置，那么 useContext 将返回上下文对象的默认值。