react

一、Why choose front-end 2012.07毕业后，进了一家游戏公司做运营策划，写过营销方案、做过内容编辑、知道广告投放和换量，还得兼职产品经理画原型。 每天9.30-23.00以后，周末经常加班，像无头苍蝇一样碰撞一年后，我没有任何成就感，我开始思考自己每天做的是什么，将来会做什么，做的这份工作是自己喜欢的吗？在这个领域上将来会有所成就吗？ 1、重复而繁杂 => No，我喜欢专心研磨一个东西，直到做好它 2、各种会议和无数遍的方案修改 => No，我做事的时候不喜欢被打扰，但这并不妨碍我是个喜欢交流的家伙 3、表面上付出了无数心血的产品，到头来说不出它哪些地方属于你 => 很可悲，螺丝钉，物质和精神上都没有得到回报 4、个人成长，想总结自己毕业一年的提升，除了满口的流量、DAU、PV等词汇和一套又一套的运营方法论，发现竟然都是一些很虚的东西（至少在当时的我看来是的） 5、高强度而无原则、低效率的加班 基于以上等等，从2013开始，我不断的审视自己，我自己是个什么样的人，我喜欢做什么，我适合做什么，我会在什么领域有所成就 1、我经常会为了研究一个东西废寝忘食，投入而专注 => 貌似适合做技术 2、我能坚持做一件事情，不会三分钟热度 => 貌似适合做技术 3、我大学很喜欢捣鼓跟电脑相关的东西，从软件PS、AI、ID到优化电脑系统到重装系统到最后自己组装电脑 =>

ZooTeam 前端周刊｜第 84 期 浏览更多往期小报，请访问： weekly.zoo.team CSS :not伪类可能错误的认识 « 张鑫旭-鑫空间-鑫生活 伪类是目前唯一一个可以大规模放心使用的逻辑伪类，非常有用，优点也很突出，但是，其中也不乏一些会让人踩坑的地方，本文主要介绍这几个可能错误认识的地方。 Webpack DevServer配置 - 简书 DevServer 该文档主要描述关于devserver的相关配置。(配置同webpack-dev-middleware兼容) devServer(Object类型) 该配置... 面向 Model 编程的前端架构设计 这篇文章将简略地介绍我们当前的无线前端架构设计及其演进之路。 钉钉前端-如何设计前端实时分析及报警系统 - 掘金 前端早早聊大会，由前端早早聊与掘金联合举办。 第七届 - 微前端，5 月 30 日直播，7 位讲师（阿里云/飞猪/宋小菜/字节头条/淘宝/蚂蚁金服），报名地址：huodongxing.com/go/tl7第八届 - 进大厂，5 月 31 日直播，15 位讲师... React Hooks 最佳实践 - 掘金 写在前面 在过去的几个月里，React Hooks 在我们的项目中得到了充分利用。在实际使用过程中，我发现 React Hooks 除了带来简洁的代码外，也存在对其使用不当的情况。

前置 react-dom 提供了可在应用顶层使用的 DOM（DOM-specific）方法。 render() hydrate() unmountComponentAtNode() findDOMNode() createPortal() 你可以使用以下命令在本地启动一个 node 服务器，运行本文的示例。 npm i create-react-app -g create-react-app test --typescript --use-npm npm start render render 有三个参数： 要渲染的 React 元素 元素挂载位置 在组件被渲染或更新之后被执行的回调 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'), () => {} ) 渲染机制: stack https://claudiopro.github.io/react-fiber-vs-stack-demo/stack.html 先比对再更新视图 fiber https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html 将比对拆分 hydrate 与 render() 相同，但它用于在

最近在使用react过程中发现在使用ref时的一些场景，自己初步感觉react的ref没有vue那么强大。 现在我就简单看下怎么使用ref？ createRef 我们直接看源码 // node_modules/react/umd/react.development.js // an immutable object with a single mutable value function createRef() { var refObject = { current: null }; { Object.seal(refObject); } return refObject; } 其实 createRef 也没做什么，就是返回了一个对象 { current: null} ，但是在返回值之前进行了 Object.seal 操作 Object.seal() 方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。 我们简单测试下 createRef使用场景 我们一般是在构造函数里面先新建个空的ref，为了方便在调试工具中查看，我们把ref放到state里面。 比如 import AsideMenu from './Menu.jsx'; export default class Layout extends React.Component {

在项目数据全局状态管理上，在react框架使用的是Redux; Redux是为了解决应用程序状态（State）管理而提出的一种解决方案。从单项数据流方面说，redux中将整个状态都集中在一个JavaScript对象树中。然后通过数据变更也就是通知，而将组件变更动作储存在store 仓库中。等到使用 时候 使用this.store.dispacth分发 通过下面在项目使用ngrx： 首先创建 store文件夹中，再创建actions reducers selectors 三个文件 1, 在reducer 初始化state 状态，和值 export enum ModalType { Register = "register", LoginByPhone = "loginByPhone", Share = 'share', Like = 'like', Default = 'default' } //初始化State类型 export interface MemberState { modalVisible: boolean; modalType: ModalType } //初始化State的值 export const initialState: MemberState = { modalVisible: false, modalType: ModalType.Default } /

话说这天，我们团队开会讨论了一个问题，不，与其说“讨论”，不如说“争吵”更合适。 背景是这样的： 我们要开发一个 xxx 后台管理系统，这个系统业务复杂、功能又多，大家的争吵集中在“这个系统是否应该用前后端分离的方案”。 这次争吵的问题比较典型，于是我就写了这篇文章。为了大家好理解，把“xxx 后台管理系统”泛化一下，变成： 开发一个大型后台管理系统，应该用前后端分离的技术方案吗？ 先说一下，本文中的观点肯定有人不认同，再加上我对前端技术掌握有限，所以大家批判的看吧。 1. 先审题，冷静的分析一下 前后端分离的优点多多，这不需要多说，大家人人都清楚。 来，讨论之前，我们先一起好好审审题。 结合“ 开发一个大型后台管理系统 ”这个约束条件，冷静的分析一下： • 什么是后台管理系统：首先后台管理系统这个称呼，意味着这是一个 B 端系统 。可以小到部门级应用（客户投诉登记系统、办公设备台账系统），大一点可以是大集团级核心系统（500 强保险公司客服、呼叫中心），可以是 ERP、CRM、OA（SAP、用友、泛微协同），可以是一个 B2C 电商的商城后台、支付网关管理控制台，可以是 Saas 的管理后台（Salesforce、Teambition、Jira），可以大到阿里云控制台…… • 什么是大型：我理解大型系统是指功能模块多、交互复杂，而不是访问量、TPS、数据量大。所以 CMS、OA

下图是useRef的demo效果图，通过“一个父组件嵌套一个子组”件来总结一些知识点。 demo 父组件 知识点总结 useRef是一个方法，且useRef返回一个可变的ref对象（对象！！！） initialValue被赋值给其返回值的.current对象 可以保存任何类型的值:dom、对象等任何可辨值 ref对象与自建一个{current：‘’}对象的区别是：useRef会在每次渲染时返回同一个ref对象，即返回的ref对象在组件的整个生命周期内保持不变。自建对象每次渲染时都建立一个新的。 ref对象的值发生改变之后，不会触发组件重新渲染。有一个窍门，把它的改边动作放到useState()之前。 本质上，useRef就是一个其.current属性保存着一个可变值“盒子”。目前我用到的是pageRef和sortRef分别用来保存分页信息和排序信息。 代码示例 import React, { useRef, useEffect, useImperativeHandle, forwardRef, } from "react" ; const RefDemo = () => { const domRef = useRef(1); const childRef = useRef(null); useEffect(() => { console.log( "ref:deom-init" ,

应届生：阿姨,我不想努力了 在学校用 React + antd 做过后台管理系统，熟悉 React 技术栈。 两年前端：公司技术栈是 React ，都用了一年了，我 React 贼六。 五年前端：带团队把公司的粪坑项目用 React 重构了。 React 对我来说就跟呼吸一样容易。 ：要不学学 React 源码吧。 ...... %……& （ &……% ，怎么这么难懂，阿姨，我不想努力了。 明确学习目的 考虑下，你的学习目的是： 真的想学 React 源码。 只想理解 React 的大体工作流程，了解一些经常被大佬们提起的名词（比如 Diff算法 、 Fiber架构 、 时间切片 ），好和面试官吹水。 如果是2，向你推荐一篇mini教程 build-your-own-react ，包教包会，谁用谁知道。同时你可以关闭这篇文章了。 如果是1，那我们接着往下看。 源码为什么难懂 你决定首先看看源码的目录 满怀信心的打开 facebook/react 仓库下的 packages 目录，印入眼帘的是一屏翻不完的20+文件夹。 你听说 React 的主要调度逻辑在 react-reconciler 目录下，你轻点鼠标，印入眼帘的大概有80+文件。 怎么这么多，阿姨，我不想努力了。 你听别人说看源码要从第一个commit看起 你翻页翻断了手指，终于找到13年的 commit 。 这和现在的

手撸的乞丐版如下，仅实现了最基础的功能，订阅，派遣，获取三个功能，不过已经可以简单使用了，做个计数器是没啥问题，而且可以更简单粗暴的看到redux的核心功能 注意：该篇篇幅较长，建议收藏后慢慢看，也可以直接去github上拉下来自己试一试~ 《github传送门》 --------------------------------------------------------------正文开始------------------------------------------------------------- 简易版redux，真正的redux源码在文章最后面，源码较长，将近300行，刨去注释和兼容开发版不到100行，处理的场景比较多。我自己写的这个redux仅实现了它的核心功能，没有去管太多的兼容问题，但是代码少一点，大家对它的接受程度也会高一点，希望大家能够看懂。 const REDUX_INIT_TYPE = "@@REDUX_INIT_TYPE" export function createStore ( reducer , preloadedState , enhancer ) { /** * 为什么要交换一下？ * 看名字，可以大概知道第二个参数preloadedState代表了预设的State，如果不传就是空的， * 也就是state的默认值

实现 React Hooks UI 开发有两个问题： 展示复用 逻辑复用 展示复用目前基本使用组件化来解决，逻辑复用一直以来都没有特别好的解决方案。React 从一开始的 mixin ，到 高阶组件 以及 Render Props ，都是在试图解决这个问题，但是都引入了一些别的问题。 Mixins 命名空间冲突 数据来源不清晰 Higher-order Components props 属性来源不清晰 props 上命名冲突 额外的组件渲染带来性能问题 Render Props(Vue 中的 Renderless Components) 解决了 命名空间冲突、数据来源不清晰的问题，仍然会带来额外组件实例的性能消耗 Hooks 在前段时间 Hooks 发布后，我认为 React 找到了【有状态】组件【函数式】【复用逻辑】的解决方案。 先说有状态：一般来说，无状态组件直接使用函数组件就行，省去了实例化的样板代码和性能消耗。不涉及到 state 的存取，可以直接写个 helper 函数处理一下，方便又快捷。 再说函数式：class 组件是面向对象的，每一次声明、声明周期都逃不开 this，而 hooks 更加函数式，调用一个函数，传入的是初始值，返回修改值，没有副作用。 最后说复用逻辑：DRY，一般来说，相同的代码不写第二次，在 class 组件中，通过生命周期方法对 state 修改