一、次级渲染
什么是次级渲染？我们总是希望render返回的jsx足够小，以便于阅读理解，于是将jsx使用js function进行拆分，简化render函数，就是次级渲染。比如:
render() {
let {renderBody} = this;
return (
<div className={s.dialog}>
<Header second={second} onClose={this.clickOnClose}/>
<div className={s.dialogBody}>
{renderBody()}
</div>
<Footer resultCode={resultCode} />
</div>
)
}
renderBody即为次级渲染函数，其中return了body相关的jsx，使得render函数足够简化。
二、发现问题
有时候，可能因为种种原因，需要在js function中承载部分js逻辑，但是这些js可能会为你产生一个隐藏的严重性BUG，并且这并不是一个好办法，为什么不使用function component拆分组件呢？但是，我就是这样写了。。。
这会导致什么问题？举个栗子，
function IfElse({ condition, children }) {
const childArr = React.Children.toArray(children);
if(condition){
return _.get(childArr, "[0]", null);
}
return _.get(childArr, "[1]", null);
}
首先，封装了一个IfElse组件，用来模拟三目表达式。
然后，创建一个类组件
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: ""
};
this.dataModel = null;
}
componentDidMount(){
setTimeout(()=>{
this.dataModel = {getName: function (){return "西红柿"}};
this.setState({title:'蔬菜'});
}, 2000);
}
renderText = () => {
const name = this.dataModel.getName();
const { title } = this.state;
return <div>{`${title}->${name}`}</div>
};
render() {
let { title } = this.state;
return (
<div>
<IfElse condition={title.length > 0}>
{this.renderText()}
<div>waiting...</div>
</IfElse>
</div>
);
}
}
使用setTimeout模拟协议请求，初始化dataModel，IfElse组件根据title.length判断显示哪个子组件。这些代码，大略看一遍，很难发现问题在哪，跑起来试试
直接报错了，
getName方法找不到，因为this.dataModel为空。
为什么？明明IfElse组件开始是不会返回第一个子组件的。这是我第一时间的想法，顿时脑子出现很多浮想，this指针不对？IfElse组件有问题？还是其他什么未知问题？
经过增加各种打印，发现renderText里的打印始终会最先执行，而IfElse组件里的打印根本还没有触发，也就是说js function会优先于其他组件的逻辑执行。再次翻阅了react官网关于jsx的说明->深入 JSX，豁然开朗。
其实早就应该想明白的。
jsx只是React.createElement的语法糖，babel会将jsx转译成
React.createElement(
'div',
{className: 'sidebar'},
null
)
形式的代码。
比如上面的IfElse组件，经过babel转译，则变成
React.createElement(IfElse, {
condition: title.length > 0
}, this.renderText(), React.createElement("div", null, "waiting..."));
此时，IfElse组件还未生成，已经先执行了一次this.renderText()，所以直接报错。
三、解决办法
1、直接增加一次安全判断
renderText = () => {
if (!this.dataModel) {
return null;
}
const name = this.dataModel.getName();
const {title} = this.state;
return <div>{`${title}->${name}`}</div>
};
这应该是最粗暴的方法了，哪里出问题补哪里，但是增加安全判断还是有必要的，可以有效提升软件的健壮程度。
2、不使用IfElse组件进行判断，使用js进行判断
{
title.length > 0?this.renderText():<div>waiting...</div>
}
使用js判断，则开始的时候根本执行不到renderText方法，但是这样可读性不是很好，并且与IfElse组件的意图违背。
3、使用function component拆分组件
RenderText = () => {
const name = this.dataModel.getName();
const {title} = this.state;
return <div>{`${title}->${name}`}</div>
};
render() {
React.createElement(IfElse, {condition:false}, []);
let { title } = this.state;
let { RenderText } = this;
return (
<div>
<IfElse condition={title.length > 0}>
<RenderText />
<div>waiting...</div>
</IfElse>
</div>
);
}
这应该是最好的解决办法了，次级渲染并不推荐使用，即使是要用，也不应包含过多逻辑处理。
这里使用了类内函数组件，复用性较差，应尽量使用独立的function component，如下所示
function VisibleText({title, name}) {
return <div>{`${title}->${name}`}</div>;
}
render() {
React.createElement(IfElse, {condition:false}, []);
let { title } = this.state;
let name = this.dataModel && this.dataModel.getName();
return (
<div>
<IfElse condition={title.length > 0}>
<VisibleText title={title} name={name} />
<div>waiting...</div>
</IfElse>
</div>
);
}
