向天卷飞机

博客终于搭建成功了！！！！ Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment

useCallback【记忆函数】eg：代表代码对照 若文章有误，欢迎读者指出 【记忆函数，实现了类似记忆组件、计算属性的功能，也能进行scu优化】 useCallback记忆函数，效果类似记忆组件memoize-one，把某个函数进行缓存，然后把当前函数体返回给你 正常情况下，父组件中当前数据改变，当前父组件无条件刷新，当然子组件也随之刷新，当前子组件依赖的数组没有发生改变，咱么就可以通过scu技术，不让他刷新 parent.jsx父组件 123456789101112131415161718192021222324// 引入useState、useCallback两个hooksimport React, { useState, useCallback } from 'react'import Child from './Child'// useCallback，记忆函数，效果类似记忆组件，memoize-one,把某个函数进行缓存，然后把当前函数体返回给你。// 作用：如果子组件传入的有函数，scu会被打 ...

React Hookseg：代表代码对照 若文章有误，欢迎读者指出 函数式编程变成越来越流行，函数组件通过hooks也能像类组件保存数据状态，使用类似生命周期函数， Hooks【钩子，把功能拿过来用】简介：在React的世界中，有容器组件和UI组件之分，在React Hooks出现之前，UI组件我们可以使用函数，无状态组件来展示UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给UI组件进行渲染。在我看来，使用React Hooks相比于从前的类组件有以下几点好处： 代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过React Hooks可以将功能代码聚合，方便阅读维护 组件树层级变浅，在原本的代码中，我们经常使用HOC/render props等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在React Hooks中，这些功能都可以通过强大的自定义的Hooks来实现 useState保存数据状态【实习了类似state】 函数组件不能放数据状态，没 ...

CSS-in-JS技术eg：代表代码对照 若文章有误，欢迎读者指出 CSS-in-JS简介 CSS-in-JS是一种技术，而不是一个具体的库实现。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些css，scss或less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用户怎么去为组件定义样式的问题，而Vue有属于框架自己的一套定义样式的方案。 styled-components 应该是CSS-in-JS最热门的一个库，通过styled-components，你可以使用ES6的标签模板字符串语法，为需要styled-Component定义一系列CSS属性，当该组件的JS代码被解析执行的时候，styled-components会动态生成一个CSS选择器，并把对应的CSS样式通过style标签的形式插入到head标签里面。动态生成的CSS选择器会有一小段哈希值来保证全 ...

React核心包如何降级eg：代表代码对照 若文章有误，欢迎读者指出 安装17.0.2的React核心包npm i -S react@17.0.2 react-dom@17.0.2 核心包降级 入口文件重新引入ReactDOM、配置 17.0.2入口文件 123456789import React from 'react'import ReactDOM from 'react' // 17.0.2引入写法import App from './App'// 17.0.2 入口写法 注意语法ReactDOM.render( <App />, document.getElementById('root')) 18.2入口文件 12345678910import React from 'react'import ReactDOM from 'react-dom/client' // 18.2引入写法import App from ...

withRouter高阶组件eg：代表代码对照 若文章有误，欢迎读者指出 作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上 默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(‘/uri’)跳转到对应路由的页面，然而不是所有组件都直接与路由相连的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props 12345// 引入withRouterimport { withRouter} from 'react-router-dom'// 执行一下withRouterexport default withRouter(Cmp) 路由懒加载12// 箭头函数方式component:resolve =>require(['@/component/Login'],re ...

路由 React-Router V5版本eg：代表代码对照 若文章有误，欢迎读者指出 提前创建pages文件夹里面放几个页面 根组件一般使用函数组件，也可以使用类组件 安装插件学习v5.3.0版本路由 npm i -S react-router-dom@5.3.0 App.js需要去入口文件，配置路由模式 引入页面 从第三方路由模块中引入Route路由对象当标签使用，Switch标签和Redirect重定向标签 使用标签配置一级路由【地址栏输入路径默认与这里的path做正则匹配，包含这里path就符合,不加switch会每个都匹配】 通过route这个标签绑定两个属性，建立path 和 component的一个映射关系 Switch 指定我们路由匹配规则,提高性能，只匹配一个 exact 属性，精确匹配 path完全相等才算成立，二级路由的时候切记使用 Swit ...

Redux学习【store】eg：代表代码对照 若文章有误，欢迎读者指出 配置store 1234567891011121314151617181920212223242526272829/*store 类似vue中的store, 项目中唯一的仓库安装reduxnpm i -S redux*/// 引入createStoreimport {createStore} from 'redux'// store存储数据，要遵循不可变值，不能直接修改此stateconst defaultState = { num: 0}// reducer 函数逻辑，如果修改state的逻辑，初始化还是修改都是返回一个新的state// 参数1 把默认的state传入 参数2 actions是我们的触发规则// reducer执行多次，只要你触发actions就会执行reducerconst reducer = (state = defaultState, actions) => { // 这里也可以使 ...

知识点回顾eg：代表代码对照 若文章有误，欢迎读者指出 插值 {} 变量，表达式，函数调用 动态属性 属性={ 变量 } 样式写法 className={ 变量 } className={'active btn'} className={ arr.join(' ') }style={{ fontSize:'12px',color:变量 }} 循环 {arr.map((item,index)=>{return { item }}) } {Object.keys(obj).map((item,index)=>{return 属性：{ item }，属性值：{ ob[item] } }) } 组件基本认识 函数组件就是函数，函数名称大写，有return值，return的是jsx，函数没有实例，没有生命周期，没有状态，没有this, 函数组件我们也可以叫纯函数，参数不变的情况下，函数组件也不会变化。 类组件就继承react中 ...

传送门eg：代表代码对照 若文章有误，欢迎读者指出 问题：在项目中某些情况下，子元素样式会受父元素样式的影响传送门作用：让当前元素逃离父元素，去想去的地方【一般是body】使用场景： overflow: hidden 父组件z - index值太小，逃离父组件 fixed需要放在body第一层级 loading 弹框 全局组件 也应该放在最外面 1234567891011121314151617181920class PortalDemo extends Component { render() { return ( <div> <div> <div> {/* 当前div逃离当前父元素，然后去body下面,参数1 将要逃离的子元素，参数2 逃离到哪里去 */} {/* 注意：样式和功能 ...