reactnative高阶组件20-04-16

再编程过程中，有一类功能需要被不同的组件公用，这时可以使用高阶组件。接下来看一看如何实现简单的高阶组件。

1.首先这是一个简单组件

class xxx extends Component {
    render() {
      return <View>
        <Text className="demo-header">
          我是标题
        </Text>
      </View>
    }
  }

2.把他变成一个高阶组件，用

function hightOrder(WrappendComponent) { 
     return
}

把它包裹起来，并用 export default hightOrder将这个高阶函数抛出去
hightOrder：函数名称，WrappendComponent：传递进来的组件，如下：

function hightOrder(WrappendComponent){
  return class xxx extends Component {
    render() {
      return <View>
               <Text className="demo-header">
                    我是标题
               </Text>
               <WrappendComponent />  //这个就是我们在使用的时候传递进来的组件，例如：就是下文bbb里的组件。
             </View>
    }
  }
}
export default higherOrder;

3.现在我们已经写好一个含标题的高阶组件了，接下来是使用如何使用它：

import higherOrder from './';//你定义的高阶函数路径
class bbb extends Component {
     render() {
        return (
             <Text>
                文章内容
            </Text>
        );
     }
 }
 // 调用高阶函数：
 export default higherOrder(bbb)

OK，调用高阶函数后，你的页面就既有标题又有文章内容了。

4.查找资料使用高阶组件的时候，很多都会用到装饰器，

react-native装饰器的安装看这里。装饰器在react中的应用可以参考这篇文章。