下面所有内容,都在千牛内验证过
1.支持this.props.children
组件能像HTML标签一样进行嵌套,提升组件的复用。
<FancyBorder>
<Text>
Welcome
</Text >
< Text >
Thank you for visiting our spacecraft!
</Text >
</FancyBorder>
FancyBorder组件
<View>
{this.props.children}
</View >
2.setState方法,支持传递函数
传递函数的例子:
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
3.不支持合并多个setState
原因:rax的setState是同步的,react的setState是异步的
rax原文如下:
The setState() actions are synchronous, and React setState actions are asynchronous.
在rax中,多次setState,会导致多次渲染,举个例子:
press = () => {
this.setState({ count: this.state.count+1 });
this.setState({ count: this.state.count+1 });
}
当调用这个函数后,render方法会被调用两次,意思是,组件更新了两次。
So 不要像上面那么分开setState,这么做性能并不好。正确做法是:合并成一个setState。
4.实现内容分发(slot)
把组件作为属性传给另一个组件
<SplitPane left={<Contacts />} right={<Chat />} />
SplitPane组件
<View>
<View>
{props.left}
</View >
<View>
{props.right}
</View >
</View >
5.指定组件属性的默认值
目前我们设置属性的默认值方式,可能如下:
let {name = 'Stranger'} = this.props;
这样做,代码既不美观,又容易产生遗漏,甚至每次使用name前都要设置默认值。
推荐做法:
//指定SplitPane组件name属性的默认值
SplitPane.defaultProps = {
name: 'Stranger'
};
最大的有点:
使用defaultProps在某些时候会避免重新渲染(使用shouldComponentUpdate生命周期或PureComponent API的场景下),从而提升性能。
6.类型检查API(PropTypes)
看了rax文档,我真想说句MMP,原文如下:
The PropTypes is only interface React-compatible not really working
我研究了半天,居然是这个结果,汗!
7.避免组件无意义渲染,提升应用性能
每次调用setState都会一次渲染组件,如果前后state或props没有改变,没必要进行重新渲染。为了阻止setState之后,state或props没有变组件依旧渲染的情况,可以使用下面其中一个方法:
方法一 使用生命周期函数shouldComponentUpdate
这个函数返回一个布尔值,true表示组件更新,false表示组件不更新。因此,代码可以这样写:
shouldComponentUpdate(nextProps, nextState) {
if (nextState.count !== this.state.count) {
return true
} else {
return false
}
}
shouldComponentUpdate并不会阻止子组件的render。
shouldComponentUpdate返回false,componentWillUpdate(),render(),componentDidUpdate()不会触发。
不推荐使用deep equality 来检查state 或 props的变化,因为这样做效率低,从而可能会降低性能。
方法二 使用顶级API—— PureComponent
PureComponent最重要的一个用处就是优化Rax应用,这很容易快速地实现。使用PureComponent对性能的提升是非常可观的,因为它减少了应用中的渲染次数。
PureComponent改变了生命周期方法shouldComponentUpdate,并且它会自动检查组件是否需要重新渲染。这时,只有PureComponent检测到state或者props发生变化(只是浅比较)时,PureComponent才会调用render方法,因此,你不用手动写额外的检查,就可以在很多组件中改变state.
8.正确使用ref属性
能用数据(state或props)驱动的,避免使用ref来修改组件。不能用数据驱动的,可以使用ref,比如:让input失去焦点,获得焦点。
9.最新的react支持这个生命周期componentDidCatch,希望rax能够支持下。
10.setState()不会触发该组件的componentWillReceiveProps函数
11.当组件将Unmount的时候,去掉定时器,网络请求,和事件监听,释放系统资源,提升性能。
目前我们的项目中使用了QN.on,好像没有使用QN.off解绑、注销事件
举个例子:
Index组件的click回调中存在如下代码:
QN.emit('Page.hello');
Index组件render()中存在如下代码
{
this.state.show && <Fan name="哇哈哈"/>
}
Fan组件中存在如下代码:
QN.on('Page.hello', () => {
console.log('Page.hello');
})
当我们不断修改show的值,Fan组件会不断被挂载和取消挂载,如果不在取消挂载前注销事件,那么QN.on监听会不断增多。这时候,执行一次QN.emit会同时触发N个QN.on。
组件卸载后,原本的定时器,事件监听,和网络请求可能会变得毫无意义,那么请在componentWillUnmount生命周期函数中去掉这些定时器,网络请求,和事件监听。