weixin_62831076的博客

本质：对函数代码的抽取,实现复用，减少代码逻辑。

需求：在Home组件中再嵌套两个子组件HomeRecommend和HomeRanking。1.封装一个高阶组件，给类组件注入这个hook，然后通过props就能调用并传参。Link渲染出来的是a标签，如果我们想要其它的标签，那就只能自己来操作了。将App.js中配置的路由单独抽取到router/index.js文件中。并包裹根组件，当匹配的组件还未加载成功时，可显示fallback中的内容。可单独打包，匹配到该路径才会下载对应的文件——性能优化。:当前路由选中时，会自动添加一个active的类。

它封装了Redux的核心API，并提供了一些额外工具和约定，帮助我们更高效编写Redux代码configureStore:它自动配置了 Redux 的和，并预装了一些常用的中间件（如和createSlice:接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的actionscreateAsyncThunk:接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk。

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，提高用户体验→可通过实现。React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transitiongroup。该组件帮助我们实现组件的入场和离场动画。安装方式：# npm# yarn。

高阶组件的英文是 Higher-Order Components，简称为 HOC官方定义：高阶组件是参数为组件，返回值为新组件的函数；本质：高阶组件的本质就是对传入的组件做了一个拦截，然后在拦截过程中对想要具备的功能进行一些别的操作；若想要拦截，只需要通过高阶组件进行一个包裹即可// 定义一个高阶组件// 1.定义类组件render() {return (render() {return (<div></div>

注意：在React18之前，如果在setState外边包个setTimeout这种宏任务，它不由React回调，而是浏览器。因为修改State之后，希望React根据最新的State来重新渲染界面，但这种方式的修改React并不知道数据发生了变化；React并没有类似于Vue2中的Object.defineProperty或Vue3中的Proxy的方式来监听数据的变化；原理：将回调函数传递给元素的 ref 属性，React 在挂载/卸载时调用该回调，参数为 DOM 元素。方式一：setState的回调。

(1)Constructor（）：不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。2.状态管理：通过this.state初始化状态，使用this.setState()更新，支持复杂状态逻辑。使用ES6的class语法，继承React.Component，包含render()方法和生命周期方法。通过普通函数定义，早期只能渲染UI（无内部状态state），Hooks出现后支持完整功能。3.无生命周期，可通过useEffect模拟生命周期，如组件挂载、更新、卸载等。

实际上，jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖→所有的jsx最终都会被转换成React.createElement的函数调用。假设有一个btnClick函数，但它并不是我们主动调用的，而是当button发生改变时，React内部调用→内部调用时，并不知道要如何绑定正确的this。2.获取更多参数：可通过传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数。1.获取默认参数：即event对象。

React是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。React18之后：使用 ReactDOM.createRoot() 方法来渲染组件。React18之前：使用 ReactDOM.render() 方法来渲染组件。2.react-dom：react渲染在不同平台所需要的核心代码。注意：React18前后，渲染组件的书写方式较为不同。3.babel：将jsx转换成React代码的工具。1.react：包含react所必须的核心代码。2.下载后，添加本地依赖。