We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样的功能。
Render Props
React中我们可以给一个组件传递一些props并且在组件内部展示,同样的我们也可以传递一些组件同样也是行得通的,一起看一个例子
React
props
我们可以通过组件传递一些字符串数据,并且在组件内部渲染 下面的代码很平常,我们绝大多数代码都是这样。
const Foo = ({ title }) => ( <div> <p>{title}</p> </div> ); class App extends React.Component { render() { return ( <div> <h2>这是一个示例组件</h2> <Foo title="大家好,我是土豆" /> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'))
更进一步,我们可以在组件上传递普通的HTML 标签和React 组件达到复用的目的
HTML 标签
React 组件
// https://codepen.io/tudou/full/OvdrPW const Bar = () => (<p>我是Bar组件 :)</p>); const Foo = ({ title, component }) => ( <div> <p>{title}</p> {component()} </div> ); class App extends React.Component { render() { return ( <div> <h2>这是一个示例组件</h2> <Foo title={<p>大家好,我是土豆</p>} component={() => <Bar /> } /> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'))
在上面的例子中传递普通的HTML 标签对我们复用组件没有任何帮助,重点可以看传递component这个参数,它传递给Foo组件一个函数这个函数返回的是一个Bar 组件,我们会在Foo 组件中调用并且显示component函数中的组件。我们再来写一个小的DEMO进行验证。
component
Foo
Bar 组件
Foo 组件
// https://codepen.io/tudou/full/dmawvY const Bar = ({ title }) => (<p>{title}</p>); class Foo extends React.Component { constructor(props) { super(props); this.state = { title: '我是一个state的属性' }; } render() { const { render } = this.props; const { title } = this.state; return ( <div> {render(title)} </div> ) } } class App extends React.Component { render() { return ( <div> <h2>这是一个示例组件</h2> <Foo render={(title) => <Bar title={title} />} /> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'))
在上面的例子中,给Foo 组件传递了一个render参数它是一个函数这个函数返回一个Bar组件,这个函数接受一个参数title他来自于Foo 组件调用时传递并且我们又将title 属性传递给了Bar 组件。经过上述的调用过程我们的Bar 组件就可以共享到Foo 组件内部的state 属性`。
render
Bar
title
title 属性
Foo 组件内部的
children
这个demo略微不同于上面通过props传递,而它是通过组件的children传递一个函数给Foo 组件
// https://codepen.io/tudou/full/WzPPeL const Bar = ({ title }) => (<p>{title}</p>); class Foo extends React.Component { constructor(props) { super(props); this.state = { title: '我是一个state的属性' }; } render() { const { children } = this.props; const { title } = this.state; return ( <div> {children(title)} </div> ) } } class App extends React.Component { render() { return ( <div> <h2>这是一个示例组件</h2> <Foo> {(title) => ( <Bar title={title} /> )} </Foo> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'))
观察可发现只是写法略微有些变法,我们将要传递的数据放到的组件的children。实际上并无不同之处(都是传递一个函数)
<Foo> {(title) => ( <Bar title={title} /> )} </Foo>
请注意当我们的Foo 组件继承于React.PureComponent的时候,我们需要避免下面这样的写法。不然我们的性能优化将付之东流。
React.PureComponent
render() { return ( <div> <h2>这是一个示例组件</h2> <Foo render={(title) => <Bar title={title} />} /> </div> ); }
如果你在render创建一个函数,在每次渲染的时候render prop将会是一个新的值,那么每次将会重新渲染Bar。
render prop
正确的做法应该是在组件内部创建一个函数用于显示组件
const Bar = ({ title }) => (<p>{title}</p>); class Foo extends React.Component { constructor(props) { super(props); this.state = { title: '我是一个state的属性' }; } render() { const { render } = this.props; const { title } = this.state; return ( <div> {render(title)} </div> ) } } class App extends React.Component { // 单独创建一个渲染函数 renderFoo(title) { return <Bar title={title} />; } render() { return ( <div> <h2>这是一个示例组件</h2> <Foo render={this.renderFoo} /> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'))
学习了解Render Props渲染模式原理,使用了render和children两种不同的渲染方法。更新详细的官方例子请参考 https://reactjs.org/docs/render-props.html 官方例子在线参考 https://codesandbox.io/embed/1075p1yov3
谢谢阅读
The text was updated successfully, but these errors were encountered:
No branches or pull requests
概述
Render Props
模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样的功能。React 组件数据传递
React
中我们可以给一个组件传递一些props
并且在组件内部展示,同样的我们也可以传递一些组件同样也是行得通的,一起看一个例子1. 组件普通数据传递
我们可以通过组件传递一些字符串数据,并且在组件内部渲染
下面的代码很平常,我们绝大多数代码都是这样。
2. 组件上传递组件
更进一步,我们可以在组件上传递普通的
HTML 标签
和React 组件
达到复用的目的在上面的例子中传递普通的
HTML 标签
对我们复用组件没有任何帮助,重点可以看传递component
这个参数,它传递给Foo
组件一个函数这个函数返回的是一个Bar 组件
,我们会在Foo 组件
中调用并且显示component
函数中的组件。我们再来写一个小的DEMO进行验证。3. 一个纯粹的
Render Props
例子在上面的例子中,给
Foo 组件
传递了一个render
参数它是一个函数这个函数返回一个Bar
组件,这个函数接受一个参数title
他来自于Foo 组件
调用时传递并且我们又将title 属性
传递给了Bar 组件
。经过上述的调用过程我们的Bar 组件
就可以共享到Foo 组件内部的
state 属性`。4. 通过
children
传递这个demo略微不同于上面通过
props
传递,而它是通过组件的children
传递一个函数给Foo 组件
观察可发现只是写法略微有些变法,我们将要传递的数据放到的组件的
children
。实际上并无不同之处(都是传递一个函数)注意事项
请注意当我们的
Foo 组件
继承于React.PureComponent
的时候,我们需要避免下面这样的写法。不然我们的性能优化将付之东流。如果你在
render
创建一个函数,在每次渲染的时候render prop
将会是一个新的值,那么每次将会重新渲染Bar
。正确的做法应该是在组件内部创建一个函数用于显示组件
总结
学习了解
Render Props
渲染模式原理,使用了render
和children
两种不同的渲染方法。更新详细的官方例子请参考 https://reactjs.org/docs/render-props.html官方例子在线参考 https://codesandbox.io/embed/1075p1yov3
谢谢阅读
The text was updated successfully, but these errors were encountered: