react-native 组件化思维

什么是组件化

在应用中，功能都是分模块的，在多人开发中我们也是分模块开发，最后将各个模块整合起来打包整个应用。如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。

最后编辑于：2018.10.11 23:26:32