组合所有的东西,有容乃大
在前面一个章节里,我们已经做了一个事例如何重用组建,现在要学会是这些组建高效联系起来,React如此强大的原因是能过让你以小的、可测试的、方便维护的组建以搭积木的方式构建出复杂的应用,运用这种方式你能够完全掌控每一个部分,
在这个章节里,我们将会通过最受欢迎的组合模式和工具,以下是这节的要点
-组建之间的联系通过props 和 children
-容器/展示模式如何使得代码更易维护
-mixins这种方式来处理问题和为什么它失败了
-什么是高阶组建以及怎样用它来更好构建应用
-recompose 库和他的ready-made函数
-如何与上下文交互以及避免耦合我们的组建
-子组建模式的功能是什么以及它有哪些好处
容器/展示模式如何使得代码更易维护
这种模式,每个组建分离成两个精简的部分,每个部分各司其职,容器这部分负责组建的逻辑和API调用、数据处理、事件处理,展示这部分定义用户界面,接收容器的props,轻逻辑,适合用无状态的组建,没有规定说展示组建不需要有状态,例如,它还保持UI的状态在内部
《例子已经做完》》》》》
Mixins
组建的可重性很好,但是如果不同的组建在许多地方只需要同样的行为,应该如何做呢?
我们不想要重复的撸代码,幸好React提供一个工具Mixins,当我们需要这种功能的时候在不同组建里,
虽然现在已经弃用了Mixins,但是值得我们去思考如何解决这类问题,
高阶组建
上节讲了,用Mixins来处理通用的功能,和它带来的问题,
在第二章有提到过高阶函数,这种函数赋予函数新的行为并且会返回一个新的组建,下面我们就用它来处理通用的功能,并且处理掉Mixins带来的缺点,
高阶组建是一个函数,以组建作为参数,返回一个功能增强的组建,接下来是一个使用高阶组建的例子,为每一个组建加上className
const withClassName = Component => props =>
<Component {...props} className="my-class" />
初看起来,很难理解,声明一个withClassName函数,以Component作为参数,返回一个新函数,这个新的函数是无状态的组建,这个组建呢,接收props,渲染接收参数Component
《例子已经完成》
Recompose
高阶组建库,提供小工具封装组建的一些逻辑,傻瓜式和可重用操作组建,
假设你的组建接收一个用户对象从API,对象里面有很多的属性,让组建随意的接收对象不是好的方式,因为会依赖对象的模型,一旦对象改变了,组建将变的不可用,好的方式是让组建从父组建接收原始的定义好的单个Props,
const Profile = ({ name, age }) => (
<div>Name: {name}</div>
<div>Age: {age}</div>
)
Profile.propTypes = {
name: React.PropTypes.string,
age: React.PropTypes.number,
}
Context
高阶组建能轻松的处理context
在某些情况下,使用context非常有用,通过它传递信息给子组建而不是使用props,但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传递,我们希望在某一级子组件中,直接得到上N级父组件中props中的值,如何利用React中的Context来进行值的越级传递
Function as Child
const Name = ({ children }) => children('World')
Name.propTypes = { children: React.PropTypes.func.isRequired, }
<NAME>
{name => <div>Hello, {name}!</div>}
</NAME>
hello,World!