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 显示时间的组件，则为了达到复用的效果，我可以将显示时间的组件定义成一个高阶组件。
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);
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传入。
网友评论