React スタディ ノート - Render Props
導入
Render Props值为函数propを使用してReactコンポーネント間でコードを共有する手法を指しますrender prop1 つを受け入れ返回React元素的函数、コンポーネント内でこの関数を呼び出すことによって独自のレンダリング ロジックを実装するコンポーネント- 主にコードの再利用のためにロジックを抽出するために使用されます
使用
Mouse & Cat公式ドキュメントの例を例として取り上げます
Mouseコンポーネントを作成します。このコンポーネントは复用的状态逻辑代码(状態、メソッドなど)を提供するためにのみ使用されます。- コンポーネントの外部にメソッド パラメータ
复用的状态として公開されますprops.render(state) props.render()レンダリングするコンテンツとして戻り値を使用する
import React from 'react'
class Mouse extends React.Component {
// 省略操作方法
render(){
return this.props.render(this.state)
}
}
//根组件
export default class App extends React.Component {
render(){
<Mouse render={
mouse => (
<div>当前鼠标位置 {
mouse.x} {
mouse.y}<div>
)}/>
//此处的mouse参数实际上为Mouse组件的state，因为这个函数是在Mouse组件的render()中传参调用的
}
}
注:モードの名前
render propsを使用する必要はありません。好きな名前を付けることができます。これは受け取ったものです。renderpropprop返回React元素的函数prop
実際、ビューは親コンポーネントからの入力
返回React元素的函数によって決定され、Mouseコンポーネント内のライフサイクル関数は渡された関数render()を呼び出すだけでprop、関数はビューを返します
render プロップの代わりに children プロップを使用する
組み合わせモードを使用して、コンポーネント間でコードを再利用することもできます。これは、 Vue のSlot概念に似ています。
import React from 'react'
class Mouse extends React.Component {
// 省略操作方法
render(){
return this.props.children(this.state)
}
}
//根组件
export default class App extends React.Component {
render(){
<Mouse>
{
mouse => (
<div>当前鼠标位置 {
mouse.x} {
mouse.y}<div>
)}
</Mouse>
}
}
この手法ではコンポーネントに関数を渡す必要があるため、children型チェックを行うことをお勧めします。
import PropTypes from 'prop-types'
Mouse.propTypes = {
children: PropTypes.func.isRequired
}
React.PureComponent で Render プロパティを使用する
知らせ
関数renderがメソッドで作成されているrender prop場合は、React.PureComponent
render()レンダリングのために呼び出されるたびに新しい関数が作成されるため、浅い比較が常にprops行わprevProps === nextPropsれます。false
class Mouse extends React.PureComponent {
// 与上面相同的代码......
}
class MouseTracker extends React.Component {
render() {
return (
<div>
<Mouse render={
mouse => (
<Cat mouse={
mouse} />
)}/>
</div>
);
}
}
この例では、Mouseコンポーネントのrender propトランスポートされた関数がrender()で定義されているため、コンポーネントがレンダリングMouseTrackerされるたびに新しい関数が生成され、 からの継承の効果が無効になります。Mouserender propReact.PureComponent
解決
この問題を解決するには、渡すインスタンス メソッドを定義します。render prop
class MouseTracker extends React.Component {
// 定义为实例方法，`this.renderTheCat`始终
// 当我们在渲染中使用它时，它指的是相同的函数
renderTheCat(mouse) {
return <Cat mouse={
mouse} />;
}
render() {
return (
<div>
<h1>Move the mouse around!</h1>
<Mouse render={
this.renderTheCat} />
</div>
);
}
}