分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

当我们谈论React性能优化时，有三个关键函数不容忽视：React.memo、useMemo和useCallback。今天，我们就来深入解析一下这些函数的使用场景，帮助大家更好地理解它们的用途和效果。此外，关于技术选择和个人偏好，我想分享一下我的观点。我个人偏爱Vue的简洁与直观，能够让我们更专注于业务开发而无需过度关注性能优化。而 React 的性能优化技术我并不喜欢。就像手动挡和自动挡汽车的选择，两者确实都有其独特之处。手动挡汽车提供了更多的操作自由度，但对于很多驾驶者来说，汽车就是要易用。

react hooks 为什么不能写在条件语句里

背景mobx：简单、可扩展的状态管理。相当于 redux。mobx-state-tree：MobX 是一个状态管理“引擎”，MobX-State-Tree 为其提供了应用程序所需的结构和常用工具。mobx-react：使用 React 组件包装器打包以将 React 与 MobX 相结合。导出 observer 装饰器和其他 utils。mobx-react-lite：这是mobx-react的轻量级版本，它仅支持 React功能组件，因此使库稍微更快更小MobX 是最受欢迎的 Redux

这个，大家都懂，但是还是要记录一下，防止等我老了一天忘记了哈哈哈哈父传子父组件 Parent.jsconstructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <Child txt={this.state.message}/> ) }}子组件 Son.jsrender(){

vue组件渲染和更新渲染模板渲染 render 函数 vdom 中模板中用到的 data 会被 touch 到，然后收集依赖更新data 的值变化，触发 watcherwatcher触发 re-render 视图重要的三部分：响应式模板编译render函数vdomreact组件渲染和更新渲染有 props 和 staterender 生成 vnodepatch(lem, vnode)更新setState(newState) -> dirtyompo

JSX就是Javascript和XML结合的一种格式。是一个 JavaScript 的语法扩展。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。是 React.createElement(component, props, …children) 函数的语法糖在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScriptJSX只是创建虚拟DOM的一种语法格...

1、为什么会有React Hooks，它解决了哪些问题？完善函数组件的能力，函数组件更适合 react 组件组件逻辑复用，hooks表现更好class复杂组件变的难以理解，逻辑混乱，不易拆解和测试例如：同样的逻辑，散落在 DidMount 和 DidUpdate 中，DidMount 和 WillUnMount 中，使用 hooks，同样的逻辑可以分割到一个一个的 useEffect 中2、React Hooks 如何模拟组件的生命周期？模拟 componentDidMount 和 com

HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。高阶组件是参数为组件，返回值为新组件的函数。组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。基本用法const HOCFactory = (Component) => { class HOC extends React.component { // 在此定义多个组件的公共逻辑 render () { return <Component {...t.

核心：不可变值（不要用push、splite等等改变原有数据，可以使用immutable.js插件来彻底的使用不可变值）如何优化shouldComponentUpdate(nextProps, nextState) { if (nextState.count !== this.state.count) { // 可以渲染 return true } // 不重复渲染 return false}默认值是返回 true，也就是每次都重新渲染必须配合不可变值（contact、扩展运算

场景当你的组件很大的时候，可以将组件作为一个异步组件，这样打包后你的组件会是一个独立的文件，用到的时候才载入。相关APIimport()React.lazySuspenseimport()举例使用之前：import { add } from './math';console.log(add(16, 26));使用之后：import("./math").then(math => { console.log(math.add(16, 26));});React.la

简介在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。有时候一些小功能，用 redux 会有点大材小用，那么就用 Context，其实和 vue 的依赖注入差不多。参考文档用的时候再去看 react 官方文档也不迟https://zh-hans

使用场景overflow: hidden父组件 z-index 太小fixed 需要放在 body 第一层级举例有一个子组件，层级很深，并且是fixed，一般我们 fixed 的元素放在外层（fixed元素放在最外层有更好的浏览器兼容性）就好了，那么我们如何让这个子组件放在最外层呢？render () { return ReactDom.createPortal( <div className="model">{ this.props.children }</div&

其实没有什么区别，只不过是方便一眼看出该文件中包含 jsx 语法罢了，如果你用 .jsx 后缀名，那么需要配置 babel 等支持。所以一般来说用 .js 后缀就行了。这就和 shell 脚本用 .sh 后缀，vue 用 .vue 后缀一样。...

组件初始化(initialization)阶段import React, { Component } from 'react';class Test extends Component { constructor(props) { super(props); }}Test类继承了react Component这个基类，也就继承这个react的基类，才能有render()、生命周期等方法可以使用，这也说明为什么函数组件不能使用这些方法的原因。组件的挂载(Mounting)阶段.

setState要使用不可变值首先 setState 要使用不可变值，例如：// 错误this.setState({ arr: this.state.arr.push('1')})// 正确this.setState({ arr: this.state.arr.contact('1')})上面的写法是不对的，像 push、pop、splice 这种操作都是会改变原有数据的，要用 contact、扩展运算符等等，对象的话用 Object.assign()、或对象的扩展运算符。setSt

父组件向子组件通信子组件向父组件通信跨级组件之间通信非嵌套组件间通信父组件向子组件通信父组件：import React,{ Component } from "react";import Sub from "./SubComponent.js";import "./App.css";export default class App extends Component{ render(){ return( <div> .

react事件react中的事件是合成事件event 是SyntheticEvent，模拟出来 dom 事件的所有能力event.nativeEvent 是原生事件对象所有的事件都被挂载到 document 上和dom事件不一样，和 Vue 事件也不一样注：react17中事件不再 document 上，而是绑定在 root 组件上，也就是最初的那个 root dom 节点好处：有利于多个react版本共存，例如微前端（document只有一个，root节点可以有多个）clickHa

条件运算render () { const blackBtn = <button classNamee="btn">black btn</button> const whiteBtn = <button classNamee="btn">white btn</button> if (this.state.theme) { return blackBtn } else { return whiteBtn } return <d

class// 静态写法const styleElem = <p className="title">设置class</p>// 动态写法const styleElem = <p className="{this.state.className}">设置class</p>注意：要用classNamestyle// 动态写法const styleData = { fontSize: '30px', color: 'blue' }const s

官方文档介绍相当于一个空标签，同 vue 的 template 相似使用class Columns extends React.Component { render() { return ( <React.Fragment> <td>Hello</td> <td>World</td> </React.Fragment> ); }}同class

简单的状态管理器第一阶段首先我们做一个小功能，点击按钮改变数字/*------count 的发布订阅者实践------*/let state = { count: 1};let listeners = [];/*订阅*/function subscribe(listener) { listeners.push(listener);}function changeCoun...

工作流程用户（通过View）发出Action，发出方式就用到了dispatch方法。Store自动调用Reducer，并且传入两个参数：当前State和收到的Action，Reducer会返回新的StateState一旦有变化，Store就会调用监听函数，来更新View。可以看到，在整个流程中数据都是单向流动的，这种方式保证了流程的清晰。名词解释createStore 创建 sto...

背景<input value={this.state.inputValue} />当用户对input进行操作时，没有对inputValue进行setState()操作，这个值不变，也就意味着input显示不变。受控组件每个状态的改变都有一个与之相关的处理函数。inputChange = e => this.setState({value: e.target.value...

背景react 推荐使用组合而非继承来实现组件间的代码重用。不推荐组件的继承其实组合就是父子传值例一使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}...

解决的问题react 中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。// 为当前的 theme 创建一个 context（“light”为默认值）。const Theme...

为什么出现hook

概念接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。react组件包括函数组件和 class 组件：函数组件function Welcome(props) { return <h1>Hello, {props.name}</h1>;}class组件class Welcome extends React.Component...

react 的生态在web端，移动端，服务器端，VR领域都有涉及。react本身是面向web端的，它很轻便灵活，只是MVC架构中的view(视图)层。由于只是view层，所以它需要配合生态体系中的其他框架或模块来使用。以下选择都是 github 上 star 最多的。必备路由react-router状态管理redux，react-redux，dvaredux 和 react-...