![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 55
wingchiehpih
00年前端菜鸡程序员
展开
-
React-HOOKS常用知识点总结
React-HOOKS常用知识点总结.md文章目录React-HOOKS常用知识点总结.md1、类组件与函数组件的区别2、HOOK使用原则3、useState4、useEffect5、useContext6、useReducer7、userCallbcak8、useMemo9、useRef10、useImperativeHandle11、useLayoutEffect12、自定义hook1、类组件与函数组件的区别类组件:可以定义自己的state保存自己的内部状态有自己的生命周期,在对应的生命周原创 2022-03-20 18:27:06 · 921 阅读 · 0 评论 -
重学前端-Hooks
重学前端-Hooks更新日期:11-7第一次更新:11-7第二次更新:11-13第三次更新:11-141、React Hooks 介绍1、React Hooks 是⽤来做什么的对函数型组件进⾏增强, 让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒.让开发者在不使⽤类组件的情况下, 实现相同的功能.2、React Hooks 使⽤1、useState说明使用闭包来实现保存数据状态,页面重新渲染时状态保持不变接收唯⼀的参数即状态初始值. 初始值可以是任意数据类型.返回值为数组.原创 2021-11-14 18:03:09 · 898 阅读 · 0 评论 -
react核心知识笔记
react核心知识笔记10.6更新1、对象的不可变性:原理Object.freeze()不可扩展不可删除不可修改 17+的版本扩展:Object.seal()不可扩展不可删除可以修改注意点:Object.freeze()默认是浅冻结,深层采用递归。应用场景:immutable不可变数据类型,react内部采用freeze。immer相对于immutable更轻量。function deepFreeze(obj){ Object.freeze(obj); for(let k原创 2021-10-10 21:32:22 · 120 阅读 · 0 评论 -
HOOKS笔记
HOOKS学习笔记类组件与函数组件的区别类组件可以定义自己的state,用来保存自己的内部状态,类组件有自己的生命周期,可以在对应的生命周期中完成对应的逻辑操作。在componentDidMount发送网络请求,在数据更新时可以调用componentDidUpdate生命周期,在状态发生改变只会重新执行render函数类组件中产生的副作用需要在componentWillUmmount中清除,比如redux中手动调用subscribe函数组件不可以,函数每次调用都会产生新的临时变量,函数组件被重新渲染原创 2021-08-30 00:03:44 · 368 阅读 · 0 评论 -
react-CSS学习
react-CSS学习1、内联样式(不推荐):写法:style接收一个采用小驼峰命名属性的JavaScript对象,而不是CSS字符串,并且可以引用state中的状态来设置相关样式优点:内联样式,样式之间不存在冲突,可以动态获取当前state中的状态import React, { PureComponent } from 'react';export default class App extends PureComponent { constructor(props) { supe原创 2021-08-27 23:06:29 · 112 阅读 · 0 评论 -
高阶组件学习-练习——应用场景
高阶组件学习-练习——应用场景增强propsimport React, { PureComponent, createContext } from 'react';// 定义一个高阶组件function withUser(WrappedComponent) { return props => { return ( <UserContext.Consumer> { user => { retu原创 2021-08-25 00:04:25 · 219 阅读 · 0 评论 -
react-memo浅析
react-memo浅析React.memo是一个高阶组件,类似于React.PureComponent,不同于React.memo是function组件,React.PureComponent是class组件。memo默认情况下只会对复杂对象做浅层比较,如果需要控制对比过程,需要传入第二个参数,function MyComponent(props) { /* 使用 props 渲染 */}function areEqual(prevProps, nextProps) { /* 如果把原创 2021-08-24 23:58:22 · 454 阅读 · 0 评论 -
react全局事件传递
React全局事件传递安装events第三方库: yarn add eventsimport React, { PureComponent } from 'react';// 在组件库中导入相关类import { EventEmitter } from 'events';// 创建事件总线const eventBus = new EventEmitter();class Home extends PureComponent { // 添加事件监听 componentDidMoun原创 2020-08-01 15:34:47 · 1056 阅读 · 0 评论 -
React组件之间通信(tab栏切换)
index.js渲染app组件import React from 'react';import ReactDOM from 'react-dom';import App from './App';import './index.css';ReactDOM.render(<App />, document.getElementById('root'));app.jsimport React, { Component } from 'react';import TabContr原创 2020-07-31 13:38:42 · 264 阅读 · 0 评论 -
react父子组件之间通信
父子组件之间通信父传子通信——类组件index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementById('root'));App.jsimport React, { Component } from 'react';// 这是子组件class ChildCpn原创 2020-07-31 11:49:20 · 181 阅读 · 0 评论