react 中render-props 模式和高阶组件
组件中功能相似会出现组件复用,那么在 react 怎样实现组件的复用?
- 组件状态逻辑:1. state 2. 操作state的方法
- 两种实现方案:1. render props 模式 2. 高阶组件(HOC)
render props 模式
-
将要服用的 state 和操作 state 的方法封装到一个组件中
-
对组件外暴露 state 和操作state的方法(子组件向父组件传递数据)
render() { return ( <div> // 对外暴露了,组件状态和操作组件状态的方法 { this.props.render(this.state.count, this.handleCount) } </div> ) }
-
调用父组件传递进来的函数,把 state 和操作 state 的方法作为函数参数传递进去
<div> <Counter render={(count, handleCount) => { return <button onClick={handleCount}> 我被点击了{count}次</button> }} /> </div>
children 代替 render 属性
-
注意:并不是该模式叫 render props 就必须使用名为 render 的 prop,实际上可以使用任意名称的 prop
-
把 prop 是一个函数并且告诉组件要渲染什么内容的技术叫做:render props 模式
-
推荐:使用 children 代替 render 属性
<Counter> {({count, handleCount}) => <button onClick={handleCount}>我被点击了{count}次</button> } </Counter> // 组件内部: this.props.children(this.state.count, this.state.handleCount)
// Context 中的用法: <Consumer> {data => <span>data参数表示接收到的数据 -- {data}</span>} </Consumer>
高阶组件
-
高阶组件(HOC)是一个函数,接受要包装的组件,返回增强后的组件
-
高阶组件内部创建一个类组件,在这个类组件中提供复用的状态逻辑代码,通过 prop 将复用的状态传递给被包装组件 WrappedComponent
const EnhancedComponent = withCounter(WrappedComponent) // 高阶组件内部创建的类组件: class Counter extends React.Component { render() { return <WrappedComponent count={this.state.count}, handleCount={this.handleCount} /> } }
使用步骤
-
创建一个函数,名称约定以 with 开头
-
指定函数参数,参数应该以大写字母开头(作为要渲染的组件)
-
在函数内部创建一个类组件,提供服用的状态逻辑代码,并返回此组件
-
在该组件中,渲染参数组件,同时将状态通过 prop 传递给参数组件
-
调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中
function withCounter(WrappedComponent) { class Counter extends React.Component {} return Counter } // 在render方法中: return <WrappedComponent count={this.state.count}, handleCount={this.handleCount} />
传递 props
-
问题:props 丢失
-
原因:高阶组件没有往下传递 props
-
解决方式:渲染 WrappedComponent 时,将 state 和 this.props 一起传递给组件
-
传递方式:
<WrappedComponent {...this.state} {...this.props} />
总结
- 组件通讯是构建 React 应用必不可少的一环。
- props 的灵活性让组件更加强大。
- 状态提升是React组件的常用模式。
- 组件生命周期有助于理解组件的运行过程。
- 钩子函数让开发者可以在特定的时机执行某些功能。
- render props模式和高阶组件都可以实现组件状态逻辑复用。
- 组件极简模型: (state, props) => UI