世界上最伟大的投资就是投资自己的教育
https://www.qiuzhi99.com/movies/react-jin-jie-ti-gao-8-gao-jie-zu-jian
https://www.qiuzhi99.com/movies/react-jin-jie-ti-gao-10-yong-gao-jie-zu-jian-lai-chong-gou-dai-ma
https://reactjs.org/docs/render-props.html
https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
https://zhuanlan.zhihu.com/p/31267131
重写前
import React from 'react';
const withMouse = (Component) => {
return class extends React.Component {
state = { x: 0, y: 0 }
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={ this.handleMouseMove }>
<Component { ...this.props } mouse={ this.state }/>
</div>
)
}
}
}
const App = (props) => {
const { x, y } = props.mouse
return (
<div style={{ height: '100%' }}>
<h1>The mouse position is ({ x }, { y })</h1>
</div>
)
}
const AppWithMouse = withMouse(App)
export default AppWithMouse;
重写后
import React from 'react';
import PropTypes from 'prop-types';
class Mouse extends React.Component {
static propTypes = {
render: PropTypes.func.isRequired
}
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>
)
}
}
const Position = ({ x, y }) => {
return (
<h1>The mouse position is ({ x }, { y })</h1>
)
}
const Position1 = ({ x, y }) => {
return (
<p>The mouse position is ({ x }, { y })</p>
)
}
const App = () => {
return (
<div style={{ height: '100%' }}>
<Mouse render={(props) => <Position { ...props } />} />
<Mouse render={(props) => <Position1 { ...props } />} />
</div>
)
}
export default App;
07:141FreeReact 技巧 #1 如何用 netlify 云服务部署 React 应用
05:342FreeReact 技巧 #2 把 React 应用部署到 GitHub Pages
10:293FreeReact 技巧 #3 React-router 教程 part 1
07:394FreeReact 技巧 #4 React-router 教程 part 2
04:525FreeReact 进阶提高免费视频教程 #5 React.PureComponent
02:366FreeReact 进阶提高免费视频教程 #6 Fragment
03:587FreeReact 进阶提高免费视频教程 #7 context(上下文)
02:518FreeReact 进阶提高免费视频教程 #8 高阶组件
08:209FreeReact 进阶提高免费视频教程 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)
05:5810FreeReact 进阶提高免费视频教程 #10 用高阶组件来重构代码
04:3011FreeReact 进阶提高免费视频教程 #11 我最爱的 React 库 - 功能强大的可插入组件(简化代码)
03:0712FreeReact 进阶提高免费视频教程 #12 返回多个组件的正确方式
06:4913FreeReact 进阶提高免费视频教程 #13 netlifyctl 一键部署前端应用
06:3714FreeReact 进阶提高免费视频教程 #14 defaultProps 和 类型检查 PropTypes part 1
09:5715FreeReact 进阶提高免费视频教程 #15 类型检查 PropTypes part 2
11:08FreeReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)
11:4517FreeReact 进阶提高免费视频教程 #17 错误边界和生命周期函数 componentDidCatch
02:3718FreeReact 进阶提高免费视频教程 #18 升级到 16.3
03:5019FreeReact 进阶提高免费视频教程 #19 探索 bind (this) 的写法
06:5020FreeReact 进阶提高免费视频教程 #20 React 16.3 全新的 Context API
09:1921FreeReact 进阶提高免费视频教程 #21 React 16.3 全新的 Context API - 实践
11:3722FreeReact 进阶提高免费视频教程 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践
06:1023FreeReact 进阶提高免费视频教程 #23 对象,数组,可变数据
06:0624FreeReact 进阶提高免费视频教程 #24 React.Children API 和 props.children 讲解
04:5625FreeReact 进阶提高免费视频教程 #25 如何使用 styled-components
07:2926FreeReact 进阶提高免费视频教程 #26 如何使用 styled-components(实践篇)
06:4027FreeReact 进阶提高免费视频教程 #27 你应该使用 redux-form(介绍)
10:3428FreeReact 进阶提高免费视频教程 #28 你应该使用 redux-form(实践篇)
08:5229FreeReact 进阶提高免费视频教程 #29 React Portals(学习方法)
04:2130FreeReact 进阶提高免费视频教程 #30 使用 React Portals 实现 Modal 框(part 1)
07:2631FreeReact 进阶提高免费视频教程 #31 使用 React Portals 实现 Modal 框(part 2)
04:3832FreeReact 进阶提高免费视频教程 #32 使用 React Portals 实现 Modal 框(part 3)
05:3033FreeReact 进阶提高免费视频教程 #33 使用 React Portals 实现 Modal 框(part 4)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
高级组件比较绕,用普通组件里套函数组件比较清爽!
高阶组件还行啦,现在也是被各种库到处用,各有各的好吧
...this.props 的意思是,被包裹组件 Component 继承了高阶组件 withMouse 的所有 props 吗
是的
我看很多库都是用高阶组件,各自的优缺点是什么呢?
你看下这个哈,可能说得明白些 https://juejin.im/post/5ce53c636fb9a07efc4960b5
谢谢啦!
还有下面几点:
1.能不能这么简单理解,render props 只能使用 render 进行传值,相较更为直观,但是可扩展性差;HOC 使用 props 传值,相较没那么直观,但是可以通过 props.param 传值,可扩展性较好。
2.能不能简单说一下 mixin。
3.可以录一个视频对 antd 组件对源码进行分析。