1. 首页

React 初学者需要知道的一些知识

使用箭头函数时不需要 .bind(this)

通常,如果有一个受控组件时,会有如下的结构:


class Foo extends React.Component{ constructor( props ){ super( props ); this.handleClick = this.handleClick.bind(this); } handleClick(event){ // your event handling logic //JS中文网 - 前端进阶资源分享 [www.javascriptC.com](https://www.javascriptc.com/) } render(){ return ( <button type="button" onClick={this.handleClick}> Click Me </button> ); } }

可以给每个方法加上.bind(this)来解决 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 workers 非常适合渐进式Web应用程序,它允许离线访问并优化互联网连接较差的用户。

但是当你不知道服务工作者正在缓存静态文件时,你会反复上传热修复程序, 却发现你的网站一直没有更新。

不要惊慌,查看 src/index.js


// 将它注销掉 serviceWorker.unregister();

从16.8版本开始,默认为 serverWorker.unregister()。

99% 的情况下不需要运行 eject 命令

Create React APP 提供了一个选项 yarn eject,可以弹出项目来定制构建过程。

我记得曾尝试自定义构建过程,使SVG图像自动内联到代码中。 我花了几个小时试图了解构建过程。最后,我们得到了一个导入文件,该文件注入 SVG 标记,我们将网站的加载速度提高了0.0001毫秒。

弹出 React 项目就像打开正在运行的汽车的引擎盖,同时动态地更换引擎,使其运行速度提高1%。

当然,如果你已经是一个 Webpack 高手,那么定制构建过程来定制项目的需求是值得的。

当你想按时完成任务时,把精力集中在它能推动你前进的地方。

ESlint Auto 保存自动格式化可节省大量时间

你可能已经从某些没有格式化的地方复制了一些代码。因为你无法忍受它看起来有多丑,你花时间手动添加空格。

码农进阶题库,每天一道面试题 or Js小知识

使用 ESLint 和 Visual Studio 代码插件,它可以在保存时为你格式化它。

码农进阶题库,每天一道面试题 or Js小知识

要怎么设置

1.在你的 package.json 中,添加一些dev依赖项并执行 npm iyarn


"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" }

2.安装 ESLint 插件

Js中文网 一个帮助开发者成长的社区,你想要的,在这里都能找到

3.启动 Auto Fix On Save

Js中文网 一个帮助开发者成长的社区,你想要的,在这里都能找到

你不需要Redux、styled-components 等等

每种工具都有其目的。也就是说,了解不同的工具是件好事。

如果你手上只有一把锤子,那么所有的东西看起来都像钉子

你需要考虑使用的一些库的设置时间,并将其与之进行比较。

  • 我要解决的问题是什么
  • 这个项目能长久地受益于这个库吗
  • React是否已经提供了一些现成的东西

现在可以使用 React 的 ContextHook,你还需要Redux吗?

当你的用户处于糟糕的互联网连接环境时,我强烈建议使用 Redux Offline

使用事件处理程序

如果您不想反复输入相同的内容,可以选择重用事件处理程序:


class App extends Component { constructor(props) { super(props); this.state = { foo: "", bar: "", }; } // Reusable for all inputs onChange = e => { const { target: { value, name }, } = e; // name will be the state name this.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,但事实并非如此,因为 setState 是异步的 // isFiltered还没有改变 if (this.state.isFiltered) { // Do some filtering } };

正确做法一:将状态传递下去


toggleFilter = () => { const currentFilterState = !this.state.isFiltered; this.setState({ isFiltered: currentFilterState }); this.filterData(currentFilterState); }; filterData = (currentFilterState) => { if (currentFilterState) { // Do some filtering } };

正确做法二:使用 setState 回调函数


toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !prevState.isFiltered }), () => { this.filterData(); }); }; filterData = () => { if (this.state.isFiltered) { // Do some filtering } };

总结

这些技巧为我节省了很多时间,我相信还有更多,欢迎在评论区留言讨论。

作者:valentinogagliardi
译者:前端小智
链接:https://segmentfault.com/a/1190000020781602
原文:https://medium.freecodecamp.org/what-i-wish-i-knew-when-i-started-to-work-with-react-js-3ba36107fd13

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:React 初学者需要知道的一些知识

链接:https://www.javascriptc.com/3363.html

« 2019高频前端面试题汇总
【JS 小书】第 4 章:JS 引擎底层的工作原理»
Flutter 中文教程资源

相关推荐

QR code