imber___zsk的博客

useSelector//features/counter/counterSlice.js//允许我们从状态中选择一个值1. export const selectCount = (state) => state.counter.value;//通过hook使用2. import { useSelector, useDispatch } from 'react-redux';const count = useSelector(selectCount);useDispatch/

目的，更多React类型，在项目中使用有更强的约束性，利于后期维护。引用ReactReact17之后不用引入React✅import * as React from 'react'import * as ReactDOM from 'react-dom'React.FCReact.FunctionComponent=React.FC，显式地定义了返回类型，其他方式是隐式推导的displayName、propTypes、defaultProps提供了类型检查和自动补全为childre

title: 对fiber的了解order: 1看了一篇官网推荐的Github文章，一篇淘系前端文章，快速看了掘金两篇大佬文章，写下这篇总结Fiber 是 React 16 中新的协调引擎。它的主要目的是使 Virtual DOM 可以进行增量式渲染。了解更多.Fiber reconciler“fiber” reconciler（调节器，用来diff的） 是一个新尝试，致力于解决 stack reconciler 中固有的问题，同时解决一些历史遗留问题。Fiber 从 React 16 开始变.

一.moment库的使用//引入import moment from 'moment';//设置中文moment.locale('zh-cn');//把value格式化成 年月日 格式moment(value).format('YYYY-MM-DD')二.field的使用//引入import { Field } from '@alifd/next';//创建 hooks 风格const field = Field.useField([]);//注入表单<Form {...f

```js/** * Create and return a new ReactElement of the given type. * See https://reactjs.org/docs/react-api.html#createelement */export function createElement(type, config, children) { let propName; // Reserved names are extracted const props =

title: Redux基础使用order: 3文章目录一.基础用法1.简单例子2.手写connect3.store的context处理4.react-redux使用二.中间件的使用1.redux中异步请求2.redux-thunk使用3.redux-devtools4.redux-saga5.中间件的原理三.reducer拆分1.拆分reducer2.combineReducers合并四.????ImmutableJS1.认识ImmutableJS2.ImutableJS常见API3.dva了解五.

title: Hooks基础使用order: 4常用的usestate、useEffect就不讲解了文章目录Hooks基础使用1.函数组件和类组件的区别2.useContext()：共享状态钩子3.useReducer()：action 钩子4.useRef()：保存引用5.useCallback6.useMemo7.useImperativeHandle8.useLayoutEffect9.自定义hooks二.父触发子事件1.父组件2.子组件三.更多概念1.????useMemo和useCall

文章目录一.redux单行1.`redux`2.`rxconst`二.redux多行3.`rxaction`4.`rxreducer`5.`rcredux`6.`rcreduxp`7.`rfcredux`8.`rfcreduxp`9.`reduxmap`10.`hocredux`前言：利用插件的代码片段、简化Rudeux编写一.redux单行1.reduximport { connect } from 'react-redux2.rxconstexport const constantN

115.项目打包运行npm install serve -gserve build1. setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2).

react-redux两个概念：UI组件不能使用任何redux的api，只负责页面呈现和交互等容器组件，负责和redux通信，将结果交给UI组件如何创建容器组件————靠react-redux的connect函数connect(mapStateToProps,mapDispatchToProps)(UI组件)mapStateToProps：映射状态，返回值是一个对象mapDispatchToProps：映射操作状态的方法，返回值是一个对象备注：容器组件中的sto

Store中第一次传给reducers的previousState初始状态为undefined，Reducers自己设置初始化action初始化的时候type为@@init@@，data为空不传动作对象两个属性 type：字符串，标识属性，唯一，必要；data：数据类型，值为任意，可选属性例子：{type:‘ADD_STUDENT’,data:{name:‘tom’,age:18}}reducer初始化状态、加工状态加工时，根据旧的state和action，产生新的state的纯函数

基础引入Link（to）标签和Route（path，componennt）标签实现路由跳转NavLink自动加类名active自定义：activeClassName=“”传标签体内容children<MyNavLink to='/home'>Home</MyNavLink><MyNavLink to='/home' children="Home"></MyNavLink>接标签体内容，是个特殊的标签属性Switch一个路径

Antd按需打包yarn add babel-plugin-import react-app-rewired customize-cra会和craco修改主题有冲突，所以没用craco项目根目录下新建config-overrides.js文件:const { override, fixBabelImports, addLessLoader } = require('customize-cra');module.exports = override( fixBabelImports('

068中小知识点连续解构赋值+重命名,如：const {keyWordElement:{value:keyWord}}=thisref使用：search = () => { console.log(this.keyWorldElement.value)}<input type="text" ref={c=>this.keyWorldElement=c} placeholder="输入关键词点击搜索"/>&nbsp;<button onClick=

ES7 React插件常用的快捷指令：met(赋值箭头语句)imp---------import moduleName from ‘module’ //组件引入fre---------iarrayName.forEach(element => { } //forEach循环anfn---------i(params) => { } //箭头函数cp---------iconst { } = this.props .

受控组件input，textarea，select自己维护state，根据用户输入进行更新。react中可变状态保存在state属性中，只能用setState更新=>结合两者，使react中state成为“唯一数据源”。react(渲染表单组件)控制输入过程中表单发生的操作。输入的值始终由 React 的 state 驱动。React以这种方式控制取值的表单输入元素就叫做“受控组件”//input、textarea handleChange(event) { this.setS

001-React简介js操作dom繁琐，且重绘回流，没有组件化代码复用率低react采用组件化模式，声明式编码，提高开发效率和组件复用率，虚拟dom和diffing算法，减少重绘回流005-jsx语法标签混入JS用{}类名className内联，用style={{width:100px}}只有一个根标签且标签必须闭合（注意img，input）标签首字母大写为组件006-jsx小练习<ul> { data.map((item,index)=&g