什么是组件化
在应用中，功能都是分模块的，在多人开发中我们也是分模块开发，最后将各个模块整合起来打包整个应用。如andorid项目开发中多个module。这是模块化开发
而组件化是基于模块化，组件化是建立在模块化思想上的一次演进，一个变种。组件化本来就是模块化的概念。但组件化粒度必模块化更小，它的划分也跟模块化不尽相同。
我们划分一个模块，通常都是根据功能模块来划分，而组件化应该是根据功能逻辑、或者业务场景来划分。
就像是数学里的提取公因式，AB + AC = A(B+C),这个时候我们就应该将A提取成一个组件。
为什么要组件化
组件化就应该像提取公因式一样，是代码清晰、整洁。极大的复用代码，而不是到处copy。也极大提高了代码的可读性。
好的代码就应该是单一申明、多出引用，这样后面修改起来也方便。
如何组件化
1、组件应该管理自己的state
react-native 、react中，当props、state发生改变时会触发shouldComponentUpdate生命周期函数，判断是否需要重新渲染，虽然每一次render时是基于dom diff来比较dom差分更新render，但是每一次的render时的每一个子组件中的render函数还是会被执行。
如下：
render() {
cosnt a = b
// 此处的代码每一次render都会被执行一次
return(
....
)
}
最外层组件render一次，则它的子组件也必然会render一次，及时你的dom tree diff比较很快， 但你还要考虑你再render和return之间这段代码。
还有如果考虑dom diff，难道每次只是小组件的dom tree diff比较不比大组件的dom tree diff 要快吗？
之所以要说这一点， 是之前看到很多人提取组件，其实就只是将一些代码提出来，感觉就是将代码拆分到几个js文件里，根本没起到组件化的作用。
举一个错误的栗子
class A extends React.PurComponent {
render() {
const { onChangeText, text } = this.props;
return(
<TextInput
...
value={text}
onChangeText ={onChangeText }
/>
)
}
}
class B extends React.Component{
render() {
....// 假设有几个取数逻辑
return (
.....
);
}
}
class C extends React.Component {
state = {
text: '',
}
render() {
return (
<View>
<A
onChengeText={(text) => { this.setState({ text }); } }
text={this.state.text}
/>
<B />
</View>
)
}
}
你组件A这么写，你考虑过组件B的感受吗？？？
汝甚叼，家翁知否？
我暂时觉得正确的写法应该是 组件A管理这个 textinput的状态，而每一次文本内容改变的时候同时通过回调发到C，这时C可以获取到最新的文本，但不需要改变C里的state，这样也不会导致B组件的多次重复render，如果需要在C中改变A里的state，可以通过ref来调用A里的内部方法改变A的state。
网友评论