react
react学习笔记
叫我黑莓大人
这个作者很懒,什么都没留下…
展开
-
React之hooks
1. React Hook/Hooks是什么?(1). Hook是React 16.8.0版本增加的新特性/新语法(2). 可以让你在函数组件中使用 state 以及其他的 React 特性2. 三个常用的Hook(1). State Hook: React.useState()(2). Effect Hook: React.useEffect()(3). Ref Hook: React.useRef()3. State Hook(1). State Hook让函数组件也可.原创 2021-03-12 23:22:53 · 514 阅读 · 0 评论 -
React路由组件的lazyLoad
1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const Login = lazy(()=>import('@/pages/Login')) 2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面 <Suspense fallback={<h1>loading.....</h1>}> <...原创 2021-03-12 23:15:31 · 143 阅读 · 0 评论 -
React之setState
setState更新状态的2种写法(1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的s...原创 2021-03-12 23:13:08 · 106 阅读 · 0 评论 -
React组件优化
Component的2个问题 1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() 2. 只当前组件重新render(), 就会自动重新render子组件 ==> 效率低效率高的做法 只有当组件的state或props数据发生改变时才重新render()原因 Component中的shouldComponentUpdate()总是返回true解决 办法1: 重写shouldC...原创 2021-03-12 23:08:11 · 53 阅读 · 0 评论 -
React组件间的通信
方式: props: (1).children props (2).render props 消息订阅-发布: pubs-sub、event等等 集中式管理: redux、dva等等 conText: 生产者-消费者模式组件间的关系: 父子组件:props 兄弟组件(非嵌套组件):消息订...原创 2021-03-12 22:59:44 · 79 阅读 · 0 评论 -
React+antd开发中实现组件按需加载和自定义主题
一、下载依赖模块yarn add react-app-rewired customize-cra babel-plugin-importless less-loader二、定义加载配置的 js 模块: config-overrides.jsconst {override, fixBabelImports, addLessLoader} = require('customize-cra'); module.exports = override( fixBa...原创 2021-03-12 22:50:13 · 148 阅读 · 0 评论