render props, 即函数作为子组件
- 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 在 React 组件间共享代码的简单技术。
- 带有 render prop 的组件带有一个返回一个 React 元素的函数并调用该函数而不是实现自己的渲染逻辑。
- 这是一种设计模式，比如我定义一个Mouse组件, 用于显示鼠标移动时的 X， Y坐标值。这个组件时用在什么元素上，则可以通过props传递给我。如：
class Cat extends React.Component {
render() {
const mouse = this.props.mouse;
return (
<img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
);
}
}
class Dog extends React.Component {
render() {
const mouse = this.props.mouse;
return (
<img src="/dog.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
);
}
}
class Mouse extends React.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.state = { x: 0, y: 0 };
}
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
});
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
);
}
}
class MouseTracker extends React.Component {
render() {
return (
<div>
<h1>Move the mouse around!</h1>
<Mouse render={mouse => (
<Cat mouse={mouse} />
)}/>
</div>
);
}
}
高阶组件（HOC）
- 高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的
- 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。当然函数也可以接收别的参数用于获取数据。
- 例如我想在多个自组件中显示系统当前的时间，又不想在每个组件中都import 显示时间的组件，则为了达到复用的效果，我可以将显示时间的组件定义成一个高阶组件。
- 定义一个带有Timer的高阶组件。
export default function withTimer(WrappedComponent) { //容器组件 return class extends React.Component { state = { time: new Date() }; componentDidMount() { this.timerID = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ time: new Date() }); } render() { // {...this.props} 将所有的props传递给元组件 //容器组件组合包裹组件，且不能修改包裹组件 return <WrappedComponent time={this.state.time} {...this.props} />; } }; }- 定义一个使用ChatApp（包裹组件） 组件，并通过withTimer进行wrapping。
class ChatApp extends React.Component { constructor(props) { super(props); this.state = { message: '', inputMessage: '', }; this.onInputChange = this.onInputChange.bind(this); this.onHandleSend = this.onHandleSend.bind(this); } onInputChange(event) { this.setState({ inputMessage: event.target.value, }) } onHandleSend() { const newMessage = this.state.inputMessage; if(!_.isEmpty(newMessage)) { this.setState({ message: newMessage, inputMessage: '', }); } } render() { return ( <div> <div>{this.props.name}</div> <div>value={this.state.message}</div> <input value={this.state.inputMessage} onChange={this.onInputChange} /> <button onClick={this.onHandleSend}>Send</button> <div> {this.props.time.toLocaleDateString()} </div> </div> ) } } export default withTimer(ChatApp);- 使用ChatApp组件
class HocComponent extends React.Component { render() { return ( <div className='chat-app'> <ChatApp name="chat"/> </div> ) } } export default HocComponent; - 应用场景：用于定义一种设计模式，从而达到复用的目的。
- 约定
- 高阶组件就是一个没有副作用的函数，
- 高阶组件是通过将原组件 包裹（wrapping） 在容器组件（container component）里面的方式来 组合（composes） 使用原组件， 并不会改变原始组件。
- 包裹组件接收容器组件的所有props属性以及一个新的 data（此例中为time属性）属性，并用 data 属性渲染输出内容。
- 从例子中可以看出，高阶级组件的定义就是一个函数，因此你可以传递任何参数，从而更灵活的使用，比如可以使得data属性是可配置的，则可以传递一个函数，进行不同的选择。
- 使用时切记不要修改原组件，而是使用组合的形式， 即使用容器组件组合包裹组件，同时不修改包裹组件。
- 将不相关的props属性传递给包裹组件，{...this.props
},这么做的目的是高阶组件给组件添加新特性。他们不应该大幅修改原组件的接口。 - 最大化使用组合
// React Redux's `connect` const ConnectedComment = connect(commentSelector, commentActions)(Comment); // connect是一个返回函数的函数（译者注：就是个高阶函数） const enhance = connect(commentListSelector, commentListActions); // 返回的函数就是一个高阶组件，该高阶组件返回一个与Redux store // 关联起来的新组件 const ConnectedComment = enhance(CommentList);- 包装显示名字以便于调试
- 注意事项
- 要在render函数中调用高阶函数，如果需要动态调用，可以在构造函数或组件的生命周期函数中调用。
- 必须将静态方法做拷贝，当使用高阶组件包装组件，原始组件被容器组件包裹，也就意味着新组件会丢失原始组件的所有静态方法。
function enhance(WrappedComponent) { class Enhance extends React.Component {/*...*/} // 必须得知道要拷贝的方法 :( Enhance.staticMethod = WrappedComponent.staticMethod; return Enhance; }- 你可以使用hoist-non-react-statics来帮你自动处理，它会自动拷贝所有非React的静态方法
import hoistNonReactStatic from 'hoist-non-react-statics'; function enhance(WrappedComponent) { class Enhance extends React.Component {/*...*/} hoistNonReactStatic(Enhance, WrappedComponent); return Enhance; }- Refs属性不能传递:一般来说，高阶组件可以传递所有的props属性给包裹的组件，但是不能传递refs引用。因为并不是像key一样，refs是一个伪属性，React对它进行了特殊处理。如果你向一个由高阶组件创建的组件的元素添加ref应用，那么ref指向的是最外层容器组件实例的，而不是包裹组件。React.forwardRef 的 API 可以用来解决这一问题
容器型组件。
- 容器型组件（Container component）可以理解成一个页面容器，由一个个展示型组件组成。
- 拥有自身的state， 从服务器获取数据，或者与redux等其他数据处理模块协作。
- 主要关注组件数据如何交互
- 需要通过类定义组件声明，并包好生命周期函数和其他附加方法。
展示型组件
- 展示型组件（Presentational component）， 主要是用于定义一些比较通用的用于页面展示的组件，不包含具体的业务逻辑，如Button, Input 等控件。
- 仅从props接收数据和回调，通常没有自己的state。
- 通常可以写成函数组件。
- 主要负责组件内容如何展示。
有状态组件（stateful）
- 最直观的理解就是组件自身维护了state属性，可以通过this.setState()进行修改。
无状态组件（stateless）
- 没有自己的state属性，全部数据从调用端通过props传入。
