[译] 我多希望在我学习 React.js 之前就已经知晓这些小窍门
- 原文地址:What I wish I knew when I started to work with React.js
- 原文作者:David Yu
- 译文出自:掘金翻译计划
- 本文永久链接:github.com/xitu/gold-m…
- 译者:xionglong58
- 校对者:xujiujiu,wznonstop
自从 2013 年 5 月 29 日发布初始版本以来,React.js 迅速抢占互联网。很明显,包括我在内的很多开发者都从这一神奇的架构中获益。
在 Medium 中有很多关于 React.js 的教程,我真希望在初学 React.js 的时候,其中能有一篇能告诉我下面所列的一些小窍门。
使用箭头函数的时候不需要 .bind(this) 操作
通常,当你有一个受控组件的时候,你的程序多少会包含下面的内容:
class Foo extends React.Component{constructor( props ){super( props );this.handleClick = this.handleClick.bind(this);}handleClick(event){// your event handling logic}render(){return (<button type="button" onClick={this.handleClick}>Click Me</button>);}
}
复制代码
你之所以会针对每一个方法使用 .bind(this)
,是因为大多数教程告诉你得那样做。当你有很多受控组件的时候,你的 constructor(){}
将会显得特别臃肿。
其实,你可以这样做:
class Foo extends React.Component{handleClick = (event) => {// your event handling logic}render(){return (<button type="button" onClick={this.handleClick}>Click Me</button>);}
}
复制代码
咋样?
ES6 中的箭头函数使用词法作用域让方法能够访问其被定义位置的 this
。
当 service worker 阻碍你开发时
service worker 有利于渐进式 web 应用,它使得网页能够离线访问,并在用户的网络连接状态差时进行优化。
但是,如果你没有意识到 service worker 在缓存你的静态文件,你会反复尝试进行热替换操作。
却发现网站一直得不到更新。?
莫慌张, 确保你的 src/index.js
文件中有以下内容:
// 确保注销 service worker
serviceWorker.unregister();
复制代码
从 React.js 的 16.8 版开始,上面一行默认就是 serverWorker.unregister()
。
但是,如果以后版本有变化,你也会知道在哪儿进行修改。
99% 的情况下你不需要使用 eject
Create React App 提供一个命令 yarn eject
,使得你能够定制项目的构建过程。
还记得我曾为了在代码中自动内嵌 SVG 图片而尝试去自己配置构建过程。我花了大量的时间去了解整个构建过程。最终我们得到了一个注入了 SVG 标签的导入文件,并将站点的加载速度只提高了 0.0001 毫秒。
eject 你的 React 项目就像是打开运行中汽车的引擎盖,并在行驶中更换引擎一样。
当然了,如果你是一名 Webpack 大佬,那么为了满足项目的需求而去定制构建过程也是值得的。
如果你只是想按时完成任务,那就把精力全部集中在能够推动你前进的地方。
ESlint 的 Auto Fix On Save 会让你节省很多时间
你可能也曾从某些地方拷贝过格式混乱的代码。由于无法接受它“丑陋”的格式,你不得不花时间手动加一些空格啥的。
有了 ESLint 和 Visual Studio Code 插件,代码会在你保存文件时自动对齐。
如何进行设置呢?
- 在你的
package.json
文件中添加一些 dev dependencies 并执行命令npm i
或yarn
:
"devDependencies": {"eslint-config-airbnb": "^17.1.0","eslint-config-prettier": "^3.1.0","eslint-plugin-import": "^2.14.0","eslint-plugin-jsx-a11y": "^6.1.1","eslint-plugin-prettier": "^3.0.0","eslint-plugin-react": "^7.11.0"}
复制代码
- 安装 ESLint 扩展
- 勾选 Auto Fix On Save
你并不需要 Redux、styled-components 等库
每种工具都有其用途,了解不同的工具也确实是件好事。
如果你手里有一把锤子,所有东西看上去都像钉子。—— 亚伯拉罕·马斯洛
使用一些库时你需要考虑引入它们的时间成本,还要考虑下面的几个问题:
我将要去解决什么问题?
项目能否长久的受益于这个库吗?
React 本身是不是已经提供了现成的解决方法?
当 React 有 Context 和 Hooks 时, 你真的还需要 Redux 吗?
当你的用户处于糟糕的网络环境时,我尤其推荐你使用 Redux Offline。
重用事件处理器
如果你不喜欢重复编写相同的程序,那重用事件处理器是一个不错的选择:
class App extends Component {constructor(props) {super(props);this.state = {foo: "",bar: "",};}// Reusable for all inputsonChange = e => {const {target: { value, name },} = e;// name will be the state namethis.setState({[name]: value});};render() {return (<div><input name="foo" onChange={this.onChange} /><input name="bar" onChange={this.onChange} /> </div>);}
}
复制代码
setState 方法是异步的
小白时期的我可能会写下面的程序:
constructor(props) {super(props);this.state = {isFiltered: false};}toggleFilter = () => {this.setState({isFiltered: !this.state.isFiltered});this.filterData();};filterData = () => {// this.state.isFiltered 值应该为 true,但事实上却为 falseif (this.state.isFiltered) {// Do some filtering}};
复制代码
建议 1:向下传递 state
toggleFilter = () => {const currentFilterState = !this.state.isFiltered;this.setState({isFiltered: currentFilterState});this.filterData(currentFilterState);
};filterData = (currentFilterState) => {if (currentFilterState) {// 做些过滤操作}
};
复制代码
建议 2:在 setState 的第二个回调函数中操作 state
toggleFilter = () => {this.setState((prevState) => ({isFiltered: !prevState.isFiltered}), () => {this.filterData();});
};filterData = () => {if (this.state.isFiltered) {// 做些过滤操作}
};
复制代码
总结
这些小窍门节省了我很多时间,我也相信还有很多关于 React.js 的小窍门。请在评论区自由评论、分享你所知道的小窍门。
(广告时间)如果你希望你的网站与微信平台进行结合,并获得 10 亿以上的用户,快注册获取微信常用术语词汇表.
如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。
转载于:https://juejin.im/post/5cc53af6f265da038e54b2e6
[译] 我多希望在我学习 React.js 之前就已经知晓这些小窍门相关推荐
- 【译】你不知道的Chrome调试工具技巧 第七天:异步console的趣味小窍门
特别声明 本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列.据作者透露一共有24篇,一直更新到12月24日 版权归原作者所有. 前两篇的翻译链接我已经给到了作者本人,虽然 ...
- react 学习路线_2018 React JS路线图
react 学习路线 成为阅读JS开发人员的插图指南,其中包含相关课程的链接 React JS或简称React是用于开发Web应用程序的前端或GUI的领先JavaScript库之一. 在Faceboo ...
- 撰写本文的所有基本React.js概念
Update: This article is now part of my book "React.js Beyond The Basics". 更新:本文现在是我的书<超 ...
- 编写react组件_如何编写第一个React.js组件
编写react组件 React的函数和类组件,道具,状态和事件处理程序 (React's function and class components, props, state, and event ...
- React.js 三周 -- 入门到搭建团队基础项目
吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的. 导致了,前端就被死死的绑在了IDEA战车上.想要看页面效果,先起几个java服务.想要调试一个改动,重启个java服务 ...
- react.js开发_2020 React.js开发人员路线图
react.js开发 成为阅读JS开发人员的插图指南,其中包含相关课程的链接 React JS或简称React是用于开发Web应用程序的前端或GUI的领先JavaScript库之一. 在Faceboo ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- React.js 小书 Lesson15 - 实战分析:评论功能(二)
作者:胡子大哈 原文链接: http://huziketang.com/books/react/lesson15 转载请注明出处,保留原文链接和作者信息. 上一节我们构建了基本的代码框架,现在开始完善 ...
- 2020 年,React.js 开发者如何更好地修炼内功?
整理 | 弯月,责编 | 郭芮 出品 | CSDN(ID:CSDNnews) ReactJS(简称Reat)是最流行的前端框架.它由Facebook开发,近年来发展迅猛,已成为了基于组件GUI开发的标 ...
最新文章
- Laravel7使用Auth进行用户认证
- php 微信第三方登录demo,第三方登录 - 快速接入微信、QQ、微博等第三方登录方式 – 基于ThinkPHP和Bootstrap的极速后台开发框架...
- Python 中re.split()方法
- MANIFEST.MF文件全面解析
- Updates were rejected because the tip of your current branch is behind
- hdu 1908数据结构水题
- android 面包屑控件,Android —— 面包屑控件(BreadcrumbTreeView)
- vue+drf没公网ip接入支付宝功能
- 外币折算、汇兑损益、重估
- win10安装linux子系统详细教程(非虚拟机方式)
- 【笔记】在 Windows 中制作 Ubuntu 系统的USB启动盘
- 浅谈Spring IOC的理解
- 聊聊IO——阻塞?非阻塞?同步?非同步?
- MCDF实验——Lab5
- 基于xwiki部署企业内部知识管理平台
- 5G学习笔记之F1AP
- python-10-爬虫selenium繁体字转换为简体字和NCR字符处理
- 哈理工OJ 1192 追逐(贪心算法)
- {练习题}函数(2)
- OpenGLES的shader介绍
热门文章
- matlab求机制,[转载]文化算法 matlab
- day16【前台】项目展示
- day05【后台】菜单维护
- oracle数据库字段的值加一_天天面试--数据库乐观锁和悲观锁
- 机器人绳索英雄下载苹果手机_机器人绳索英雄
- ps语义分割_一键抠图,毛发毕现:这个GitHub项目助你快速PS
- linux命令th,Linux 第13天 文本操作命令
- linux下的c语言编程实验4,实验四-Linux下的C语言编程
- 低压抽屉柜常见故障处理方法_传真机常见故障如何处理 传真机常见故障处理方法【详解】...
- android 4.4 webview 上传,android使用webview上傳文件(適配4.4以上系統)