React
92huahua
每天积累一点点
展开
-
在React中引用antd UI
本文只讲按需引入的方法1.使用方法//引入方式import {Button} from 'antd';//使用<Button type="primary">点我呀</Button>2.配置方法1.安装包antd和react-app-rewired customize-cra babel-plugin-importnpm install react-app-rewired customize-cra babel-plugin-importnpm .原创 2021-10-21 12:30:00 · 165 阅读 · 0 评论 -
react项目搭建及创建的小demo
一、环境搭建nodejs NVM(安装10.x版本的node可暂时不安装) vscode git(可选择安装,可使用系统自带CMD)二、初始化项目cnpm install -g create-react-appcreate-react-app my-appcd my-appnpm start原创 2021-10-22 12:30:00 · 227 阅读 · 0 评论 -
React中的pureComponent纯组件
1.实现性能优化import React,{Component,PureComponent} from 'react'export default class pureComponentpage extends PureComponent { constructor(props) { super(props) this.state={ count: 0//浅比较 } } setCount=()=>.原创 2021-10-20 13:32:41 · 217 阅读 · 0 评论 -
React中 redux+react-redux的使用
1.安装npm install react-redux -S2.react-redux的使用,是结合redux使用的react-redux提供了两个API,provider为后代组件提供store,connect为组件提供数据和变更方法3.范例在index.js中import store from './store'import {Provider} from 'react-redux'ReactDOM.render( <Provider store={st..原创 2021-08-19 10:22:25 · 144 阅读 · 0 评论 -
React的状态管理库redux的使用
redux是JavaScript应用的状态容器,提供可预测花的状态管理。它保证程序行为一致性且易于测试。1.安装reduxnpm install redux -S2.使用步骤(1)需要一个store来存储数据(2)store里的reducer初始化state并定义state修改规则(3)通过dispatch一个action来提交对数据的修改(4)action提交到reducer函数里,根据传入的action的type,返回新的state3.代码示范(1)创建stor.原创 2021-08-19 10:19:16 · 162 阅读 · 0 评论 -
React源码----react底层原理解析之fiber
Fiber的特点/作用Fiber能够使得动画、布局和页面交互变得更加的流畅。一、Fiber的概念React Fiber是react执行渲染时的一种新的调度策略,JavaScript是单线程的,一旦组件开始更新,主线程就一直被React控制,这个时候如果再次执行交互操作,就会卡顿。当js在处理大型计算的时候会导致页面出现卡帧的现象,更严重的会出现页面“假死”。所以在这些情况下,必然会导致动画丢帧、不连贯,用户体验就特别差。为了解决这个问题,我们可以将大型的计算拆分成一个个小型计算,然后按照执行原创 2020-12-10 20:17:28 · 381 阅读 · 1 评论