《Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程》 和 《零基础学习 Vue3 教程 2021 年最新教程 免费视频教程》 正在更新
世界上最伟大的投资就是投资自己的教育
https://www.rails365.net/movies/react-jin-jie-ti-gao-8-gao-jie-zu-jian
https://www.rails365.net/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;
1FreeReact 技巧 #1 如何用 netlify 云服务部署 React 应用
2FreeReact 技巧 #2 把 React 应用部署到 GitHub Pages
3FreeReact 技巧 #3 React-router 教程 part 1
4FreeReact 技巧 #4 React-router 教程 part 2
5FreeReact 进阶提高免费视频教程 #5 React.PureComponent
6FreeReact 进阶提高免费视频教程 #6 Fragment
7FreeReact 进阶提高免费视频教程 #7 context(上下文)
9FreeReact 进阶提高免费视频教程 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)
10FreeReact 进阶提高免费视频教程 #10 用高阶组件来重构代码
11FreeReact 进阶提高免费视频教程 #11 我最爱的 React 库 - 功能强大的可插入组件(简化代码)
12FreeReact 进阶提高免费视频教程 #12 返回多个组件的正确方式
13FreeReact 进阶提高免费视频教程 #13 netlifyctl 一键部署前端应用
14FreeReact 进阶提高免费视频教程 #14 defaultProps 和 类型检查 PropTypes part 1
15FreeReact 进阶提高免费视频教程 #15 类型检查 PropTypes part 2
FreeReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)
17FreeReact 进阶提高免费视频教程 #17 错误边界和生命周期函数 componentDidCatch
18FreeReact 进阶提高免费视频教程 #18 升级到 16.3
19FreeReact 进阶提高免费视频教程 #19 探索 bind (this) 的写法
20FreeReact 进阶提高免费视频教程 #20 React 16.3 全新的 Context API
21FreeReact 进阶提高免费视频教程 #21 React 16.3 全新的 Context API - 实践
22FreeReact 进阶提高免费视频教程 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践
23FreeReact 进阶提高免费视频教程 #23 对象,数组,可变数据
24FreeReact 进阶提高免费视频教程 #24 React.Children API 和 props.children 讲解
25FreeReact 进阶提高免费视频教程 #25 如何使用 styled-components
26FreeReact 进阶提高免费视频教程 #26 如何使用 styled-components(实践篇)
27FreeReact 进阶提高免费视频教程 #27 你应该使用 redux-form(介绍)
28FreeReact 进阶提高免费视频教程 #28 你应该使用 redux-form(实践篇)
29FreeReact 进阶提高免费视频教程 #29 React Portals(学习方法)
30FreeReact 进阶提高免费视频教程 #30 使用 React Portals 实现 Modal 框(part 1)
31FreeReact 进阶提高免费视频教程 #31 使用 React Portals 实现 Modal 框(part 2)
32FreeReact 进阶提高免费视频教程 #32 使用 React Portals 实现 Modal 框(part 3)
33FreeReact 进阶提高免费视频教程 #33 使用 React Portals 实现 Modal 框(part 4)
© 汕尾市求知科技有限公司 | 关注我们 | 专业版网站 | 在线学员:1140
粤公网安备 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组件对源码进行分析。