Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pull] master from ecomfe:master #1

Merged
merged 6 commits into from
Oct 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
This repository contains the specifications.


- [Javascript编码规范](javascript-style-guide.md) <span class="std-rec">[1.3]</span>
- [Javascript编码规范 - ESNext补充篇](es-next-style-guide.md) <span class="std-rec">[draft]</span>
- [JavaScript编码规范](javascript-style-guide.md) <span class="std-rec">[1.3]</span>
- [JavaScript编码规范 - ESNext补充篇](es-next-style-guide.md) <span class="std-rec">[draft]</span>
- [HTML编码规范](html-style-guide.md) <span class="std-rec">[1.2]</span>
- [CSS编码规范](css-style-guide.md) <span class="std-rec">[1.2]</span>
- [Less编码规范](less-code-style.md) <span class="std-rec">[1.1]</span>
Expand Down
8 changes: 4 additions & 4 deletions react-style-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@
static displayName = `asPure(${componentName})`

render() {
return <Component {..this.props} />;
return <Component {...this.props} />;
}
};
};
Expand Down Expand Up @@ -228,7 +228,7 @@

- [建议]使用`@autobind`进行事件处理方法与`this`的绑定。

由于`PureComponent`使用[`shallowEqual`](https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js)`进行是否渲染的判断,如果在JSX中使用`bind`或箭头函数绑定`this`会造成子组件每次获取的函数都是一个新的引用,这破坏了`shouldComponentUpdate`的逻辑,引入了无意义的重复渲染,因此需要在`render`调用之前就将事件处理方法与`this`绑定,在每次`render`调用中获取同样的引用。
由于`PureComponent`使用[`shallowEqual`](https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/shallowEqual.js)进行是否渲染的判断,如果在JSX中使用`bind`或箭头函数绑定`this`会造成子组件每次获取的函数都是一个新的引用,这破坏了`shouldComponentUpdate`的逻辑,引入了无意义的重复渲染,因此需要在`render`调用之前就将事件处理方法与`this`绑定,在每次`render`调用中获取同样的引用。

当前比较流行的事前绑定`this`的方法有2种,其一使用类属性的语法:

Expand All @@ -254,7 +254,7 @@
使用类属性语法虽然可以避免引入一个`autobind`的实现,但存在一定的缺陷:

1. 对于新手不容易理解函数内的`this`的定义。
2. 无法在函数是使用其它的装饰器(如`memoize`、`deprecated`或检验相关的逻辑等)。
2. 无法在函数上使用其它的装饰器(如`memoize`、`deprecated`或检验相关的逻辑等)。

因此,推荐使用`@autobind`装饰器实现`this`的事先绑定,推荐使用[core-decorators](https://www.npmjs.com/package/core-decorators)库提供的相关装饰器实现。

Expand Down Expand Up @@ -292,7 +292,7 @@
return (
<div>
<span>Hello World</span>
</div>;
</div>
);
}
}
Expand Down