自2013年5月29日初次宣布以来，React.js已占据了互联网。我和许多其他开发人员将他们的胜利归功于这个了不得的框架，这已不是什么隐秘了。
想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你！
运用箭头函数时不须要 .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
}
};
总结
这些技能为我节约了许多时候，我置信另有更多。请在批评区与我们分享。
你的点赞是我延续分享好东西的动力，迎接点赞！
交换
干货系列文章汇总以下，以为不错点个Star，迎接 加群 互相进修。
我是小智，民众号「大迁天下」作者，对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！
关注民众号，背景复兴福利，即可看到福利，你懂的。
