beifeng1996

摘要： 如何配置 React-Router 实现路由切换 （1）使用<Route> 组件 路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹 阅读全文

摘要： Hook 简介 Hook出世之前React存在的问题 在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使 阅读全文

摘要： mixin Mixin 设计模式 Mixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，可以拷贝多个属性到一个对象上，为了解决代码复用问题。 常用的方法：JQuery 的 extend 方法。 var LogMixin = { log: function( 阅读全文

摘要： 如何在 ReactJS 的 Props上应用验证？ 当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有 props，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的 props 用 isRequir 阅读全文

摘要： 前言 所谓同构，简而言之就是，第一次访问后台服务时，后台直接把前端要显示的界面全部返回，而不是像 SPA 项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来可以大大减少首屏等待时间。 同构概念并不复杂，它也非项目必需品，但是探索它的原 阅读全文

摘要： 开发者普遍认为状态是组件的一部分, 但是同时却又在剥离状态上不停的造轮子, 这不是很矛盾么? 对于一个最简单的文本组件而言 function Text(){ const [text, setText] = useState('载入') return (){ <p>{text}</p> } } 你觉得 阅读全文

摘要： 为什么调用 setState 而不是直接改变 state？ 解答 如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。 另外，您还可以谈谈如何不保证状态更新是同步的。如果需要基于另一个状态（或属性）更新组件的状态， 阅读全文

摘要： 前言 最近一直在学习关于React方面的知识，并有幸正好得到一个机会将其用在了实际的项目中。所以我打算以博客的形式，将我在学习和开发（React）过程中遇到的问题记录下来。 这两天遇到了关于组件不必要的重复渲染问题，看了很多遍官方文档以及网上各位大大们的介绍，下面我会通过一些demo结合自己的理解进 阅读全文

摘要： 先来思考一个老生常谈的问题，setState是同步还是异步? 再深入思考一下，useState是同步还是异步呢？ 我们来写几个 demo 试验一下。 先看 useState 同步和异步情况下，连续执行两个 useState 示例 function Component() { const [a, se 阅读全文

摘要： 概述一下 React中的事件处理逻辑。 为了解决跨浏览器兼容性问题， React会将浏览器原生事件（ Browser Native Event）封装为合成事件（ Synthetic Event）并传入设置的事件处理程序中。 这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异 阅读全文