自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,迎接 加群 互相进修。
我是小智,民众号「大迁天下」作者,对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货,在进阶的路上,共勉!
关注民众号,背景复兴福利,即可看到福利,你懂的。