React知识点系列(7)-每天10个小知识

目录

    • 1. 在 React 中,如何使用 `useCallback` 和 `useMemo` Hooks 来优化性能?请解释一下它们的工作原理和适用场景。
      • `useCallback`:
      • `useMemo`:
    • 2. 请描述一下在 React 项目中如何使用 Enzyme 和 Jest 进行单元测试。如何编写测试用例并运行测试?
      • 步骤:
    • 3. 在 React 中,什么是 React Router?如何使用它来实现路由功能?请描述一下 React Router 的核心概念和用法。
      • 核心概念:
      • 用法示例:
    • 4. 如何使用 React 的 `useContext` Hook 来共享状态和管理全局状态?请解释一下 `useContext` 的工作原理和适用场景。
      • 工作原理:
      • 适用场景:
      • 示例:
    • 5. 在 React 项目中,如何进行性能优化?请列举一些常见的性能优化技巧和实践经验。
    • 6. 在 React 项目中,你如何进行代码分割和动态导入,以实现按需加载和性能优化?
    • 7. 如何使用 React 的 memoization 技术来提高组件性能?
      • 使用 `React.memo`:
      • 使用 `useMemo` 钩子:
      • 适用场景:
    • 8. 请描述一下在 React 项目中如何使用 Jest 进行单元测试。
    • 9. 在 React 中,什么是 React Router?如何使用它来实现路由功能?
      • 安装 React Router:
      • 创建路由组件:
      • 创建导航链接:
      • 路由参数和动态路由:
      • 嵌套路由:
      • 路由守卫:
    • 10. 如何使用 React 的 `useReducer` Hook 来管理组件状态?请解释一下它的工作原理。
      • 创建 reducer 函数:
      • 使用 `useReducer` 钩子:
      • 工作原理:


👍 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!


1. 在 React 中,如何使用 useCallbackuseMemo Hooks 来优化性能?请解释一下它们的工作原理和适用场景。

useCallbackuseMemo 都是用于性能优化的React Hooks,它们的工作原理和适用场景如下:

useCallback

  • 工作原理useCallback用于缓存一个函数,以确保它不在每次渲染时都创建一个新的函数。它接受两个参数,第一个是要缓存的函数,第二个是依赖项数组。只有依赖项数组中的值发生变化时,才会重新创建函数。
  • 适用场景:适用于将回调函数传递给子组件时,以避免子组件在每次渲染时都重新渲染。也适用于优化事件处理程序,以避免不必要的重新渲染。
const memoizedCallback = useCallback(() => {doSomething();
}, [dependency]);

useMemo

  • 工作原理useMemo用于缓存计算结果,以确保只在依赖项数组中的值发生变化时重新计算结果。它接受两个参数,第一个是计算函数,第二个是依赖项数组。
  • 适用场景:适用于优化昂贵的计算或数据处理,以避免在每次渲染时都重新计算相同的值。
const memoizedValue = useMemo(() => {return computeExpensiveValue(a, b);
}, [a, b]);

这些Hooks有助于避免不必要的性能损耗,特别是在具有大量渲染的组件中。

2. 请描述一下在 React 项目中如何使用 Enzyme 和 Jest 进行单元测试。如何编写测试用例并运行测试?

Enzyme和Jest是常用于React单元测试的工具。以下是使用Enzyme和Jest进行React单元测试的一般步骤:

步骤:

  1. 安装Enzyme和Jest:首先,您需要在项目中安装Enzyme和Jest以及相关插件。通常,您需要安装enzyme, enzyme-adapter-react-xx, jest, @testing-library/react, @testing-library/jest-dom等库。
  2. 配置Jest:在项目根目录中创建一个jest.config.js文件,并配置Jest以支持React。
module.exports = {setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],// 其他配置...
};
  1. 创建测试文件:在与要测试的组件相同的目录中创建一个以.test.js.spec.js结尾的测试文件,或在__tests__目录中创建测试文件。
  2. 编写测试用例:使用Jest和Enzyme编写测试用例。以下是一个示例测试用例:
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';describe('MyComponent', () => {it('renders without crashing', () => {const wrapper = shallow(<MyComponent />);expect(wrapper.exists()).toBe(true);});it('renders the correct text', () => {const wrapper = shallow(<MyComponent text="Hello, World" />);expect(wrapper.text()).toBe('Hello, World');});
});
  1. 运行测试:在命令行中运行Jest来执行测试。您可以使用以下命令:
npm test
# 或
yarn test

Jest将查找所有.test.js.spec.js文件并运行测试用例。测试结果将显示在控制台中。

  1. 断言和模拟:在测试用例中使用断言(如expect)来验证组件的行为,并使用Enzyme的API来模拟用户交互,查找组件和检查状态。
  2. 清理和重构:确保您的测试是独立的,不依赖外部状态。如果测试失败,修复问题并重构代码。

这些是进行React单元测试的基本步骤。通过编写测试用例,您可以确保组件的行为如预期,并在代码变更时及时捕获潜在的问题。

3. 在 React 中,什么是 React Router?如何使用它来实现路由功能?请描述一下 React Router 的核心概念和用法。

React Router是一个用于管理路由和导航的库,允许您在React应用中实现单页面应用(SPA)的路由功能。以下是React Router的核心概念和用法:

核心概念:

  1. BrowserRouterBrowserRouter是React Router的核心组件之一,用于包装整个应用程序。它使用HTML5历史API(pushState、replaceState)来处理路由。
  2. RouteRoute组件用于定义路由规则。您可以将Route嵌套在BrowserRouter内部,以匹配URL和呈现相应的组件。
  3. LinkLink组件用于创建导航链接,它会触发路由的切换而不需要整个页面的重新加载。
  4. SwitchSwitch组件用于包装多个Route,并确保仅渲染匹配的第一个路由。
  5. Route参数:可以在路由中使用参数,例如/users/:id,然后通过this.props.match.params.id来访问参数值。

用法示例:

import React from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const Contact = () => <div>Contact</div>;const App = () => (<BrowserRouter><div><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/contact">Contact</Link></li></ul></div><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} /></Switch></BrowserRouter>
);export default App;

在上述示例中,我们创建了一个简单的应用程序,定义了三个路由(Home、About、Contact),并使用Link组件来进行导航。

React Router提供了丰富的功能,包括嵌套路由、路由守卫、动态路由等,使得在React应用中实现路由功能变得简单且灵活。

4. 如何使用 React 的 useContext Hook 来共享状态和管理全局状态?请解释一下 useContext 的工作原理和适用场景。

useContext是React的Hook,用于在函数组件中访问全局状态或共享状态。它的工作原理类似于React的上下文(Context)API,但更方便和直观。

工作原理:

  1. 在应用程序的根组件上创建上下文对象(createContext)。
  2. 使用useContext Hook来订阅上下文,并获取上下文中的值。
  3. 在任何子组件中,可以使用useContext Hook来访问共享状态。

适用场景:

  • 全局应用程序状态:useContext适用于共享全局应用程序状态,如用户身份认证、主题、语言等。
  • 避免逐层传递属性:通过useContext,您可以避免将属性从父组件传递到深层嵌套的子组件中。
  • 简化代码:它使状态管理更简单,减少了需要编写的代码。

示例:

// 创建上下文
const MyContext = React.createContext();// 在根组件中提供上下文
function App() {const sharedState = { user: 'John', theme: 'dark' };return (<MyContext.Provider value={sharedState}><div><Navbar /><Content /></div></MyContext.Provider>);
}// 子组件中使用useContext
function Navbar() {const sharedState = useContext(MyContext);return <div>Logged in as {sharedState.user}</div>;
}function Content() {const sharedState = useContext(MyContext);return <div>Theme: {sharedState.theme}</div>;
}

在上述示例中,useContext Hook使子组件能够直接访问共享状态,而无需手动传递属性。

useContext是React中用于共享全局状态的一种强大工具,它简化了状态管理,提高了组件的可维护性。

5. 在 React 项目中,如何进行性能优化?请列举一些常见的性能优化技巧和实践经验。

性能优化是确保React应用顺畅运行的关键,以下是一些常见的性能优化技巧和实践经验:

  1. 使用生产版本的React:在生产环境中使用React的生产版本,以减小文件大小和提高性能。
  2. 组件懒加载:使用React的懒加载功能,只在需要时加载组件,减小初始加载时间。
  3. 代码拆分:将应用程序代码拆分为多个小模块,使用Webpack等工具实现按需加载,减小初始包大小。
  4. 使用Memoization:使用useMemouseCallback Hook来缓存计算结果和函数,避免不必要的重新计算和渲染。
  5. 避免不必要的重新渲染:使用shouldComponentUpdate(对类组件)和React.memo(对函数组件)来防止不必要的组件重新渲染。
  6. 使用事件委托:将事件处理程序绑定在父组件上,通过事件委托的方式减少事件处理程序的数量。
  7. 使用CDN和缓存:使用内容分发网络(CDN)来加速静态资源的加载,并利用浏览器缓存。
  8. 图片优化:压缩和优化图像,选择适当的图像格式,并使用懒加载图片。
  9. 使用PureComponent:对于类组件,使用PureComponent代替Component,以自动进行浅比较来确定是否需要重新渲染。
  10. 减小渲染次数:避免在render方法中执行昂贵的操作,将其移到componentDidMount或使用useEffect
  11. 避免不必要的计算:避免在渲染期间执行大量计算,尤其是在render方法中。
  12. 减少HTTP请求:合并和减少HTTP请求,使用HTTP/2协议来提高资源加载速度。
  13. 使用适当的数据结构:选择适当的数据结构(如Set、Map等)来提高数据操作的性能。
  14. 内存管理:确保及时清除不再使用的引用以防止内存泄漏。
  15. 使用React Profiler:React提供的Profiler工具可以帮助您分析和识别性能瓶颈。
  16. SSR和PRerendering:对于SEO和性能优化,可以考虑服务器端渲染(SSR)或预渲染。
  17. 使用Web Workers:将计算密集型任务移到Web Workers以避免主线程阻塞。

这些是一些常见的性能优化技巧和实践经验,可以根据项目需求和性能瓶颈采取相应的措施来提高React应用的性能。

这里所提到的是React应用性能的一般性优化方法,具体优化策略可能因应用的特定需求而有所不同。

6. 在 React 项目中,你如何进行代码分割和动态导入,以实现按需加载和性能优化?

在React项目中,代码分割和动态导入是用于实现按需加载和性能优化的关键技术。以下是如何进行代码分割和动态导入的一般方法:

  1. 使用动态导入

    使用JavaScript的import()函数来动态导入组件或模块。这会告诉Webpack在运行时加载所需的代码块。

    import React, { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyComponent'));function MyComponent() {return (<div><Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense></div>);
    }

    在上述示例中,LazyComponent在需要时才会被加载。

  2. 使用React Router进行按需加载

    如果您使用React Router来管理路由,您可以使用React.lazySuspense来实现按需加载路由组件。

    import React, { Suspense, lazy } from 'react';
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';const Home = lazy(() => import('./Home'));
    const About = lazy(() => import('./About'));
    const Contact = lazy(() => import('./Contact'));function App() {return (<Router><Suspense fallback={<div>Loading...</div>}><Switch><Route path="/" exact component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} /></Switch></Suspense></Router>);
    }
  3. Webpack的代码分割

    配置Webpack以启用代码分割。您可以使用optimization.splitChunks选项来将公共依赖模块提取为单独的代码块,以减小初始加载时间。

    // webpack.config.js
    module.exports = {// ...optimization: {splitChunks: {chunks: 'async',minSize: 30000,minChunks: 1,maxAsyncRequests: 5,maxInitialRequests: 3,automaticNameDelimiter: '~',name: true,cacheGroups: {vendors: {test: /[\\\\/]node_modules[\\\\/]/,name: 'vendor',chunks: 'all',},},},},
    };
  4. 按需加载组件

    考虑应用的不同部分,决定哪些组件应该按需加载。通常,只有在特定路由被访问时,或在用户与某些交互部分互动时,才加载相应的组件。

代码分割和动态导入可以显著减小初始加载时间,提高应用性能,尤其对于大型单页应用非常有帮助。确保合理划分代码块,以便根据需要加载,并使用工具来分析应用性能,以进一步优化加载时间。

7. 如何使用 React 的 memoization 技术来提高组件性能?

Memoization是一种优化技术,用于减少组件重新渲染的次数。在React中,您可以使用React.memouseMemo来实现组件级别的memoization。下面是如何使用memoization提高组件性能的方法:

使用 React.memo

React.memo是一个高阶组件,它可以包装函数组件,以使组件在输入不变的情况下避免不必要的重新渲染。

import React from 'react';const MyComponent = React.memo((props) => {// 渲染组件的内容
});export default MyComponent;

在上述示例中,MyComponent将只在props发生变化时进行重新渲染。这对于避免不必要的渲染非常有用。

使用 useMemo 钩子:

useMemo是React的一个钩子,允许您记忆(memoize)计算结果,以便在依赖不变的情况下避免重复计算。

import React, { useMemo } from 'react';function MyComponent({ data }) {const computedValue = useMemo(() => {// 进行耗时计算return computeValueFromData(data);}, [data]);return <div>Computed Value: {computedValue}</div>;
}

在上述示例中,computedValue将只在data发生变化时重新计算,而不会在每次组件渲染时都重新计算。

适用场景:

  • 当组件渲染是昂贵的,但其输入不经常更改时,使用React.memo可以提高性能。
  • 当需要在组件内部进行复杂计算,但依赖不经常更改时,使用useMemo是一种良好的方式。
  • 在列表或表格等大规模渲染的场景中,memoization可以大大减少重新渲染的次数,提高应用性能。

然而,需要谨慎使用memoization,因为不正确的使用可能会导致bug。确保只在确实需要时使用它,并在开发和测试中仔细验证组件的行为。

8. 请描述一下在 React 项目中如何使用 Jest 进行单元测试。

Jest是一个流行的JavaScript测试框架,用于编写和运行React应用的单元测试。以下是在React项目中如何使用Jest进行单元测试的一般步骤:

  1. 安装 Jest 和相关库

    使用npm或yarn安装Jest和相关依赖。

    npm install --save-dev jest @testing-library/react @testing-library/jest-dom
  2. 编写测试用例

    创建与要测试的组件相对应的测试文件,并编写测试用例。测试文件的命名约定通常是在组件文件名的基础上加上.test.js.spec.js

    例如,如果要测试一个名为MyComponent.js的组件,可以创建一个MyComponent.test.js文件,然后编写测试用例。

    // MyComponent.test.js
    import React from 'react';
    import { render, screen } from '@testing-library/react';
    import MyComponent from './MyComponent';test('renders MyComponent', () => {render(<MyComponent />);const element = screen.getByText('Hello, World!');expect(element).toBeInTheDocument();
    });
  3. 运行测试

    在项目的根目录下,使用以下命令运行测试:

    npx jest

    Jest将查找项目中所有以.test.js.spec.js结尾的文件,并执行其中的测试用例。

  4. 断言和匹配器

    Jest使用断言和匹配器来验证测试的结果。上述示例中,expect(element).toBeInTheDocument()是一个断言,用于验证元素是否在文档中。

  5. 模拟和辅助函数

    Jest允许您使用模拟和辅助函数来模拟组件的依赖或模拟用户交互。例如,您可以使用jest.fn()创建一个模拟函数来模拟API调用或事件处理。

  6. 异步测试

    如果您的组件包含异步操作,Jest提供了处理异步测试的方法,如async/awaitdone回调。

  7. 覆盖率报告

    Jest还可以生成代码覆盖率报告,帮助您了解测试覆盖的程度。您可以使用--coverage标志运行测试并生成覆盖率报告。

    npx jest --coverage

Jest是一个功能丰富且易于使用的测试框架,对于React项目的单元测试非常有用。它支持模拟、异步测试、覆盖率报告等功能,可以帮助您确保React组件的正确性和稳定性。

9. 在 React 中,什么是 React Router?如何使用它来实现路由功能?

React Router是一个用于处理前端路由的库,它允许您在React应用中创建不同的路由和页面,并通过URL来导航和呈现不同的视图。以下是关于React Router的概述和如何使用它来实现路由功能的方法:

安装 React Router:

首先,您需要安装React Router。使用以下命令来安装React Router DOM,它是处理浏览器路由的React Router库:

npm install react-router-dom

创建路由组件:

使用React Router,您可以创建路由组件,它们负责呈现特定的页面或视图。通常,您会将每个页面的内容包装在一个<Route>组件中。

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';function App() {return (<div><Switch><Route path="/" exact component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} /></Switch></div>);
}export default App;

创建导航链接:

使用<Link>组件来创建导航链接,使用户能够点击链接以导航到不同的页面。

import React from 'react';
import { Link } from 'react-router-dom';function Navigation() {return (<nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/contact">Contact</Link></li></ul></nav>);
}export default Navigation;

路由参数和动态路由:

React Router还支持路由参数,允许您创建动态路由。例如,您可以定义一个路由路径,其中包含参数,然后在组件中访问这些参数。

<Route path="/user/:id" component={User} />

User组件中,您可以使用useParams钩子来访问id参数。

import { useParams } from 'react-router-dom';function User() {const { id } = useParams();return <div>User ID: {id}</div>;
}

嵌套路由:

React Router还支持嵌套路由,允许您在一个组件内部定义更多的子路由。这对于创建复杂的应用程序布局非常有用。

路由守卫:

您可以使用路由守卫来执行导航前的验证或重定向。React Router提供了<Route>组件的render属性和<Redirect>组件来实现这一点。

React Router是一个功能强大的库,可以帮助您轻松管理React应用中的前端路由。它允许您创建多个页面,导航链接,路由参数,嵌套路由等,以构建复杂的单页面应用。了解React Router的基本概念和用法是React应用开发的关键部分。

10. 如何使用 React 的 useReducer Hook 来管理组件状态?请解释一下它的工作原理。

useReducer是React的一个钩子,用于管理组件的状态。它提供了一种替代useState的方式,特别适用于需要处理复杂状态逻辑的组件。以下是如何使用useReducer来管理组件状态的方法和工作原理:

创建 reducer 函数:

首先,您需要创建一个reducer函数,该函数将负责处理状态的更新操作。reducer函数接受两个参数:当前状态(state)和操作(action),然后返回新的状态。

const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:return state;}
}

使用 useReducer 钩子:

在组件内部,使用useReducer钩子来初始化状态和dispatch函数。

import React, { useReducer } from 'react';function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
}

工作原理:

当用户点击"Increment"或"Decrement"按钮时,dispatch函数会调用reducer函数,并传递一个包含type字段的操作对象。reducer函数根据操作的type来更新状态。最后,state将包含新的状态,并组件会重新渲染。

使用useReducer的好处在于它适用于复杂的状态逻辑,允许您将所有状态更新的逻辑集中在一个地方,使代码更易于维护和测试。此外,它还允许您将状态逻辑封装在一个独立的reducer函数中,以便多个组件共享相同的状态逻辑。

总之,useReducer是React中用于管理组件状态的有用工具,尤其适用于具有复杂状态逻辑的组件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/104526.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP实现赛邮【SUBMAIL】短信通知

接口文档地址&#xff1a;h​​​​​​ttps://www.mysubmail.com/documents 实现短信通知实例&#xff1a; $url https://api-v4.mysubmail.com/sms/xsend;//接口地址 $appId XXX;//APPID $appkey XXX;//APPKEY $phone XXX;//发送手机号 $project XXX;//模板ID $data …

git多分支、git远程仓库、ssh方式连接远程仓库、协同开发(避免冲突)、解决协同冲突(多人在同一分支开发、 合并分支)

1 git多分支 2 git远程仓库 2.1 普通开发者&#xff0c;使用流程 3 ssh方式连接远程仓库 4 协同开发 4.1 避免冲突 4.2 协同开发 5 解决协同冲突 5.1 多人在同一分支开发 5.2 合并分支 1 git多分支 ## 命令操作分支-1 创建分支git branch dev-2 查看分支git branch-3 分支合…

hadoop namenode -format报错显示:命令未找到

这个bug很搞笑&#xff0c;我做分布式搭建时&#xff0c;slaver1和slaver2都可以hadoop name -format&#xff0c;就是master不可以&#xff0c;配置都是一样的&#xff0c;这个第一时间也是想到了环境配置问题 打开环境配置文件编辑 sudo vim ~/.bashrc 添加以下代码&#…

css3 hover效果

CSS3中的:hover伪类用于创建鼠标悬停时的样式效果。当用户将鼠标悬停在页面元素上时&#xff0c;你可以为这些元素定义不同的样式规则&#xff0c;以实现交互效果 /* 一般样式规则 */ element {/* 正常状态下的样式 */ }/* 悬停样式规则 */ element:hover {/* 鼠标悬停时的样式…

抖音直播招聘小程序可以增加职位展示,提升转化率,增加曝光度

抖音直播招聘报白是指进入抖音的白名单&#xff0c;允许在直播间或小视频中发布招聘或找工作等关键词。否则会断播、不推流、限流。抖音已成为短视频流量最大的平台&#xff0c;但招聘企业数量较少。抖音招聘的优势在于职位以视频、直播方式展示&#xff0c;留存联系方式更加精…

SpringMVC中@RequestMapping注解的详细说明

RequestMapping 是Spring MVC中一个用于映射HTTP请求和控制器方法之间关系的注解。它用于定义控制器方法如何响应特定的HTTP请求&#xff0c;包括GET、POST、PUT、DELETE等。以下是RequestMapping注解的详细说明&#xff1a; 基本用法&#xff1a; RequestMapping("/examp…

伦敦银单位转换很简单

伦敦银源自于英国伦敦的电子化的白银投资方式&#xff0c;高杠杆和高收益的它的基本属性&#xff0c;但有别于国内大家所熟悉的投资品种&#xff0c;伦敦银在交易过程中有很多不一样的地方&#xff0c;需要大家地去留意。 比如伦敦银的计价单位是盎司&#xff0c;而且具体来说…

我们又组织了一次欧洲最大开源社区活动,Hugging Face 博客欢迎社区成员发帖、Hugging Chat 功能更新!...

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…

应用在汽车发动机温度检测中的高精度温度传感芯片

汽车发动机是为汽车提供动力的装置&#xff0c;是汽车的心脏&#xff0c;决定着汽车的动力性、经济性、稳定性和环保性。根据动力来源不同&#xff0c;汽车发动机可分为柴油发动机、汽油发动机、电动汽车电动机以及混合动力等。 常见的车用温度传感器有进气温度传感器、变速器…

Hadoop-HA-Hive-on-Spark 4台虚拟机安装配置文件

Hadoop-HA-Hive-on-Spark 4台虚拟机安装配置文件 版本号步骤hadoopcore-site.xmlhdfs-site.xmlmapred-site.xmlslavesworkersyarn-site.xml hivehive-site.xmlspark-defaults.conf sparkhdfs-site.xmlhive-site.xmlslavesyarn-site.xmlspark-env.sh 版本号 apache-hive-3.1.3-…

Mysql数据库 1.概述

Mysql内容概述 1. Mysql概述 数据库相关概念&#xff1a; 名称 全称 简称 数据库 存储数据的仓库&#xff0c;数据是有组织的进行存储 …

云原生Kubernetes:K8S集群版本升级(v1.20.6 - v1.20.15)

目录 一、理论 1.K8S集群升级 2.集群概况 3.升级集群 4.验证集群 二、实验 1.升级集群 2.验证集群 三、问题 1.给node1节点打污点报错 一、理论 1.K8S集群升级 &#xff08;1&#xff09;概念 搭建K8S集群的方式有很多种&#xff0c;比如二进制&#xff0c;kubeadm…

Chrome插件精选 — 鼠标手势插件

Chrome实现同一功能的插件往往有多款产品&#xff0c;逐一去安装试用耗时又费力&#xff0c;在此为某一类型插件记录下比较好用的一款或几款&#xff0c;便于节省尝试的时间和精力。 下面是两款比较好用的鼠标手势插件&#xff0c;支持很多设置选项&#xff0c;可以自定义手势&…

mysql增加字段语句转为Oracle语句

mysql增加字段语句转为Oracle语句 ALTER TABLE xm_cghyADD COLUMN WDNR blob NULL COMMENT 评审会议通知HTML AFTER HYTZFJ;在Oracle中&#xff0c;可以使用以下SQL语句来执行ALTER TABLE操作&#xff0c;将xm_cghy表添加一个名为WDNR的BLOB类型列&#xff1a; ALTER TABLE x…

455. 分发饼干

假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff0c;都有一个尺寸 s[j] …

半屏小程序

准备工作 tip 管理后台配置 设置-》第三方设置-》半屏小程序管理-》我调用的 添加小程序 有些手机会唤起失败&#xff0c;直接唤起了全屏的小程序&#xff0c;所以我们为了兼容&#xff0c;需要在app.config.ts加上 {"embeddedAppIdList": ["wxxxxxxxx"]/…

【问题思考】为什么SCAN CSCAN会导致磁臂黏着而FCFS不会导致磁臂黏着?

问题 这道18年的真题引起了我的疑惑&#xff0c;SCAN和CSCAN我认为应该也不会导致磁臂黏着&#xff0c;因为他们对于一个访问序列&#xff0c;比如19&#xff0c;24&#xff0c;52&#xff0c;现在正往外走&#xff0c;但是来了一个12的&#xff0c;不是早晚会往回走&#xff…

Windows Server 2019 激活

Windows Server 2019 Datacenter WMDGN-G9PQG-XVVXX-R3X43-63DFG Windows Server 2019 Standard N69G4-B89J2-4G8F4-WWYCC-J464C Windows Server 2019 Essentials WVDHN-86M7X-466P6-VHXV7-YY726 如果在公司内网环境中&#xff0c;正常激活后还不能使用&#xff0c;可能是做了…

【C++】如何使用RapidXML读取和创建XML文件

2023年10月11日&#xff0c;周三下午 目录 RapidXML的官网使用rapidXML读取XML文件中的元素的属性和值此次要读取的XML文件&#xff1a;ReadExample.xml用于读取此XML文件的C代码运行结果使用rapidXML创建XML文件用于创建XML文件的C代码 如果上面的代码无法运行运行结果​编辑…

动态分区分配算法之首次适应算法,最佳适应算法,最坏适应算法以及邻近适应算法

1.首次适应算法(First Fit) 1.算法思想: 每次都从低地址开始查找&#xff0c;找到第一个能满足大小的空闲分区。 2.如何实现: 空闲分区以地址递增的次序排列。 每次分配内存时顺序查找空闲分区链&#xff08;或空闲分区表&#xff09;&#xff0c;找到大小能满足要求的第一…