React
文章平均质量分 70
Hull Qin
我做了一些联机桌游网页:2人联机的五子棋、2-4人联机的斗地主、支持2-10人联机的UNO。无需下载,点开即玩!叫上朋友,即刻开局!不看广告,不做任务,享受「纯粹」的游戏!
展开
-
React 开发一个自定义输入控件
通常,Form.Item会给它的children注入两个属性:value和onChange,实现“受控模式”。我们开发输入控件时,需要兼顾受控模式和非受控模式。具体方案如下:const MyInput = (props) => { // 重命名下prop传入的 value和onChange,减少歧义 const {value: propValue, onChange: propOnChange, defaultValue} = props; // 判断初始时有无传入val原创 2021-06-18 23:07:06 · 1880 阅读 · 1 评论 -
前端【性能优化】与【代码可读性】的「权衡」
曾经写React时,追求极致的效率,各种用useMemo memo等等,后来才知道什么最重要——代码可读性。React改变了前端开发的方式,由命令式编程(jQuery操纵Dom)转化到了声明式编程(根据data声明UI),这极大程度提高了开发效率,且它内部做了很多性能优化的手段。(当然用jQuery也可以声明式编程,每次data改变就重新渲染UI,但会有性能问题,若自己解决又会导致开发效率降低)。我很佩服Facebook团队,因为React兼顾了「性能优化」和「开发效率」。开发效率:在前端开发中,.原创 2021-04-18 03:44:27 · 1985 阅读 · 1 评论 -
React Server Components 介绍 亮点
2020年12月21日,圣诞节前夕,React团队发了关于React Server Components的博客和RFC。一方面是公布他们关于React的进展,另一方面是希望吸取业界的反馈。前端简史【静态】在最早的时候是根本没有前端或者后端的概念的。当时就是用 Dreamweaver 写 html 静态页面,然后部署到一台电脑的 IIS (Internet Information Services) 上。当请求这个页面时,返回这个 html 文件。【模版】再后面一点,服务端变得复杂了一些,html.原创 2021-01-07 17:19:37 · 4145 阅读 · 8 评论 -
【React】你不了解但非常有用的API: React.Children 与 React.cloneElement
React.ChildrenReact.Children 提供了用于处理 props.children 不透明数据结构的实用方法。React.Children.mapReact.Children.map(children, function[(thisArg)])在 children 里的每个直接子节点上调用一个函数。如果 children 是一个数组,它将被遍历并为数组中的每个子节点调用该函数。如果子节点为 null 或是 undefined,则此方法将返回 null 或是 undefined,而原创 2020-12-22 02:00:23 · 2983 阅读 · 0 评论 -
一文教你: 快速上手 开发React组件 npm包 (使用TSDX)
如何开发一个NPM包供其它项目使用?我们在开发React项目时,有各种脚手架供我们选择(Create React App、Umi、NextJS等),他们默认配置好了Webpack等,极大提高了开发效率。那么如何开发NPM包呢?有类似的脚手架吗?我推荐TSDX理由如下:默认支持CommonJS、UMD、ES Module打包方式。(要开发通用的NPM包,这些的支持是必要的,不然你还得自己搞)自带开发环境、编译脚本。 开发NPM包你必须要解决的一个问题:开发时有地方调试,发布时再build &.原创 2020-11-30 23:31:29 · 5880 阅读 · 3 评论 -
React Redux 组件更新/渲染 原理 connect之mapStateToProps 看这篇就够了!比中文文档好用!
Redux中,state作为单一的数据源,众所周知,每次更新state都要通过return { ...state, others }来返回一个新的state,但是它是怎么来判断一些组件到底要不要re-render(刷新、重渲染)呢?尤其是当state层次很深的时候,会有效率问题、该刷新时不刷新的问题吗?其实关键在于这个connect()函数的第一个参数:mapStateToProps。下面举...原创 2020-04-02 22:07:15 · 4659 阅读 · 5 评论