本文从18的核心概念、新功能、更新、新api和hooks4个方面展开和讲解，从而全面揭开React 18的神秘面纱，帮助你快速上手和使用。

在使用 React 绑定 input 输入框的 onChange 方法时，如果使用中文输入法（或者其他输入法），会出现一个问题：还在输入拼音的时候，onChange 方法已经触发了，如下，即输入过程就已经触发了多次 onChange 方法。如果 onChange 方法有较为复杂…

不允许用户输入正则或者函数匹配到的字符。 现有如下需求：“仅允许输入英文、数字和汉字，不允许输入其他特殊字符和符号”。显然这种场景需要使用第二种校验方式。 然后我自以为很机智的写了下面的代码（引入了组件库 cloud-react），在输入值变化的时候（onChange 事件），…

防抖（debounce）是前端经常用到的一个工具函数，也是我在面试中必问的一个问题。团队内部推广React hooks以后，我在面试中也加入了相关的题目。如何实现一个useDebounce这个看起来很基础的问题，实际操作起来却让很多背代码的小伙伴漏出马脚。 围绕一个主题不断切换…

防抖（debounce）和节流（throttle）是前端经常用到的工具函数。 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（…

在开发过程常见场景，看下防抖与节流的作用实现， 及其在开发过程常见场景 实现的时候需要注意一些小问题。

1. react-select 代表了一种开发功能强大的 react.js 组件的全新方式，这些组件在完全可定制的同时开箱即用。 灵活的数据处理方法，具有可定制的功能。 灵活结合 emotion 这个库**(一个 css in js 的强大的库** ). 组件注入API，用于完…

react在进行组件渲染时，从setState开始到渲染完成整个过程是同步的（“一气呵成”）。如果需要渲染的组件比较庞大，js执行会占据主线程时间较长，会导致页面响应度变差，使得react在动画、手势等应用中效果比较差。 为了解决这个问题，react团队经过两年的工作，重写了r…

目的是初识fiber并实现react基础功能，请带着下面几个问题去阅读此文。 JavaScript是单线程运行的。在浏览器环境中，他需要负责页面的JavaScript解析和执行、绘制、事件处理、静态资源加载和处理。而且只能一个任务一个任务的执行，如果其中某个任务耗时很长，那后面…