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

做者：valentinogagliardi

译者：前端小智

来源：medium

---

阿(a)里(li)云(yun)服务器很便宜火爆，今年比去年便宜，10.24~11.11购买是1年86元，3年229元，能够点我时行参与

---

使用箭头函数时不须要 .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)来解决 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 保存自动格式化可节省大量时间

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

使用 ESLint 和 Visual Studio 代码插件，它能够在保存时为你格式化它。

要怎么设置

1.在你的 package.json 中，添加一些dev依赖项并执行 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"
}
复制代码

2.安装 ESLint 插件

3.启动 Auto Fix On Save

你不须要Redux、styled-components 等等

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

若是你手上只有一把锤子，那么全部的东西看起来都像钉子

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

• 我要解决的问题是什么

• 这个项目能长久地受益于这个库吗

• React是否已经提供了一些现成的东西

如今可使用 React 的 Context 和 Hook，你还须要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
  }
};
复制代码

总结

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

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：medium.freecodecamp.org/what-i-wish…

交流（欢迎加入群，群工做日都会发红包，互动讨论技术）

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

由于篇幅的限制，今天的分享只到这里。若是你们想了解更多的内容的话，能够去扫一扫每篇文章最下面的二维码，而后关注我们的微信公众号，了解更多的资讯和有价值的内容。