dlrandy
commented
6 years ago 渲染多个元素不需要封装在组件的一个公共父元素里了 React16之前要求render方法只能返回一个react元素。16以后是可以返回一个元素 数组的。列表的key不能省略，但是多个组件返回的是同一类的列表元素，key是可以相同的
const data = [
[14, 24, 125, 182],
[10, 122, 220, 310],
[0, 19, 38, 50]
];
const Aux = props => {
return props.children;
};
const Fruits = () => [
<li key="1">Apple</li>
<li key="2">Orange</li>
<li key="3">Banana</li>
];
class MoreFruits extends React.Component {
render(){
return [
<li key="1">Strawberry</li>,
<li key="2">Blueberry</li>
]
}
}
class App extends React.Component {
render(){
return (
<div>
<ul>
<li>Peach</li>
<li>Ananas</li>
<Fruits />
<MoreFruits />
</ul>
<table>
<tbody>
<RawRows data={data} />
<StatsRows data={data} />
</tbody>
</table>
</div>
);
}
}
let idCounter = 0;
const uniqueId = () => ++idCounter + '';
const convertRowsToColumns = data => (
data[0].map( (col, i) => data.map(row => row[i]))
);
const sumPerColumn = data => (
convertRowsToColumns(data).map(cols => cols.reduce((sum, col) => {
return sum + col;
}, 0))
);
const trendInPercent = data =>
sumPerColumn(data).map((value, index, list) => {
if (index === 0) {
return 0;
}
return (100 / list[index - 1] * value - 100).toFixed(0);
});
const RawRows = props =>
props.data.map(row => (
<tr key={uniqueId()}>
{row.map(item => <td key={uniqueId()}>{item}</td>)}
</tr>
));
const SumRow = props => (
<tr key="1" style={{ borderTop: '2px solid #333' }}>
{sumPerColumn(props.data).map(value => <td key={uniqueId()}>{value}</td>)}
</tr>
);
const TrendRow = props => (
<tr key="2">
{trendInPercent(props.data).map(value => (
<td key={uniqueId()}>{value}%</td>
))}
</tr>
);
const StatsRows = props => (
<Aux>
<SumRow data={props.data} />
<TrendRow data={props.data} />
</Aux>
);
ReactDOM.render(<App />, document.getElementById('root'));
使用ErrorBounaries进行错误处理 UI里的js错误不该破坏掉整个app。ErrorBoundaries就是一个react组件，来catch子组件树里的jserror的，它可以记录errors，显示fallbackUI，而不会让整个的组件树崩溃
React 16加了一个新的生命周期钩子componentDidCatch(error, componentStack)来处理封装的组件抛出来的errors，而不会卸载整个的app.这个钩子在production环境的时候，可以用来给server发送error报告。
componentDidCatch的几个特点： 1、它捕获子组件树上任意位置的jserror，记录Error，当组件崩溃的时候渲染fallback UI 2、可以封装在一个独立的组件进行复用 3、因为Errorboundaries作用于深度内嵌的结构，所以最好把他放在有意义的位置，而不是每一级 4、任何的功能组件或者类组件的render方法，构造器方法以及生命周期方法里。注意任何的Eventhandler方法抛出的错误不会被钩子捕获，除非它是在setState的updater函数里。
总结一下就是react组件的方法报错都好使，事件处理句柄只能是setState的方法里有错误的时候好使