乐趣区

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

作者:valentinogagliardi
译者:前端小智
来源:medium

使用箭头函数时不需要 .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 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 插件

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。

原文:https://medium.freecodecamp.o…

交流(欢迎加入群,群工作日都会发红包,互动讨论技术)

阿里云最近在做活动,低至 2 折,有兴趣可以看看:https://promotion.aliyun.com/…

干货系列文章汇总如下,觉得不错点个 Star,欢迎 加群 互相学习。

https://github.com/qq44924588…

因为篇幅的限制,今天的分享只到这里。如果大家想了解更多的内容的话,可以去扫一扫每篇文章最下面的二维码,然后关注咱们的微信公众号,了解更多的资讯和有价值的内容。

退出移动版