Skip to content

Commit 88aeef6

Browse files
authored
Update README.md
1 parent 4f7b646 commit 88aeef6

File tree

1 file changed

+35
-5
lines changed

1 file changed

+35
-5
lines changed

react/README.md

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -378,13 +378,14 @@
378378
bar: '',
379379
children: null,
380380
};
381-
 ```
381+
 ```
382382

383-
- 尽可能少地使用扩展运算符
383+
384+
- 尽可能少地使用扩展运算符
384385

385-
 > 为什么? 除非你很想传递一些不必要的属性。对于React v15.6.1和更早的版本,你可以[给DOM传递一些无效的HTML属性](https://doc.react-china.org/blog/2017/09/08/dom-attributes-in-react-16.html)
386+
  > 为什么? 除非你很想传递一些不必要的属性。对于React v15.6.1和更早的版本,你可以[给DOM传递一些无效的HTML属性](https://doc.react-china.org/blog/2017/09/08/dom-attributes-in-react-16.html)
386387

387-
例外情况:
388+
例外情况:
388389
 - 使用了变量提升的高阶组件
389390
```jsx
390391
function HOC(WrappedComponent) {
@@ -399,7 +400,36 @@
399400
}
400401
}
401402
}
402-
```
403+
```
404+
405+
 -  只有在清楚明白扩展对象时才使用扩展运算符。这非常有用尤其是在使用Mocha测试组件的时候。
406+
407+
 ```jsx
408+
export default function Foo {
409+
const props = {
410+
text: '',
411+
isPublished: false
412+
}
413+
414+
return (<div {...props} />);
415+
}
416+
```
417+
 特别提醒:尽可能地筛选出不必要的属性。同时,使用[prop-types-exact](https://www.npmjs.com/package/prop-types-exact)来预防问题出现。
418+
419+
```
420+
//good
421+
render() {
422+
const { irrelevantProp, ...relevantProps } = this.props;
423+
return <WrappedComponent {...relevantProps} />
424+
}
425+
426+
//bad
427+
render() {
428+
const { irrelevantProp, ...relevantProps } = this.props;
429+
return <WrappedComponent {...this.props} />
430+
}
431+
```
432+
403433

404434
## Refs
405435

0 commit comments

Comments
 (0)