render props（关于HOC、RenderProps、Hooks和使用场景）
本文目录
- 关于HOC、RenderProps、Hooks和使用场景
- [转]为什么在 React 的 Render 中使用箭头函数和 bind 会造成问题
- 「React Native」子组件Render中props为空报错问题
关于HOC、RenderProps、Hooks和使用场景
本文会用实际列子对三者进行比较
例子： 现在有两个公共组件，分别是 处理QQ、手机号码的组件。
上面 MyForm 组件使用了 QQ 、 Phone 高阶组件，可以发现以下问题
同样用上面例子
还是上面的例子
HOC 跟 renderProps也有它的存在理由的。 ①.如果组件里面还有其他渲染，不纯粹是处理state的时候可以用HOC。 ②.至于renderProps我举个真实场景，我有很多个按钮，每个按钮点击会打开不同的Dialog。一般做法的，通过定义多个 visible 的state控制Dialog，如下
①.纯粹是复用state，复用多个组件 用 hook 。 ②.使用单个组件，并且组件有自己的渲染内容可以用 HOC 。 ③.状态不需要外部使用而且只用单个组件，可以用 render props 。
(PS:具体问题具体分析，还是要多做比较，书上得来终觉浅 绝知此事要躬行。)
[转]为什么在 React 的 Render 中使用箭头函数和 bind 会造成问题
***隐藏网址***
在 render 中使用箭头函数或绑定会导致子组件重新渲染，即使 state 并没有改变。作者推荐使用提取子组件或在 HTML 元素中传递数据的方式来避免绑定。 这个例子中，我在 render 中使用一个箭头函数来绑定每个删除按钮对应的用户 ID。
点击 CodeSandbox 来查看及演示完整的 demo。（CodeSandbox 很酷，是一个 React 在线器，可以实时编译和展示当前的界面。）
在 35 行中，我使用了一个箭头函数将一个值传递给了 deleteUser 函数，这就是问题的所在。
要查看为什么会这样，先来看看 User.js：
每次 render 调用时，控制台上都会打印日志。User 已经被声明为 PureComponent。所以 User 应该只在 props 或者 state 改变时才会重新 render。但是，当你点击 delete 按钮时， 对于每一个 User 实例，都会调用 render 。
原因在于：父组件在 props 中传递了一个箭头函数。 箭头函数在每次 render 时都会重新分配（和使用 bind 的方式相同） 。所以，尽管我将 User 声明为 PureComponent，User 的父组件中的箭头函数导致 User 组件为所有的用户实例传递了一个新的函数。所以当点击任何删除按钮时，每个用户实例都会重新 render。
结论：
避免在 render 中使用箭头函数和绑定。否则会打破 shouldComponentUpdate 和 PureComponent 的性能优化。
先来看个例子比较一下在 render 中不使用箭头函数的差异。
点击 CodeSandbox 查看和运行完整 demo。
在这个例子中，index.js 的 render 中没有箭头函数了。相关的数据被传到 User.js：
在 User.js 中，onDeleteClick 调用了在 props 中传递的 onClick 函数，并传递了相应的 user.id。
当你再次点击 delete 按钮时，其他的用户再也不会调用 render 了！
为了最佳性能：
React + Redux 性能优化（一）：理论篇
「React Native」子组件Render中props为空报错问题
子组件传递 props 为空，导致在 render 中取值报错问题 问题描述 当子组件依赖父组件中的网络请求返回的数据渲染时，在网络返回成功之前，父组件第一次 render 时，传递到子组件的 props 为空，会导致子组件渲染失败报错。 解决方案 在父组件中判断网络是否返回成功 如果还没有返回，则在父组件渲染界面时用一个空 View 或者 null 占位， 或者在子组件的 props 中取值时进行判空操作
更多文章：
编辑器使用教程迷你世界（迷你世界地形编辑器怎么自定义填充物）
2024年7月4日 10:28
2024年7月11日 07:49
递归算法求解迷宫问题（设计一迷宫，并对其求解，输出从入口到出口的路径）
2024年7月4日 02:17
explanation可数吗（explanation 是可数名词还是不可数名词）
2024年7月12日 11:21
2024年7月23日 03:04
2024年5月5日 17:09
2024年7月3日 12:18
2024年8月21日 23:55
三相变极多速异步电动机（三相变极多速异步电动机是怎样实现变极，而达到变速作用）
2024年5月13日 05:48
2024年7月15日 07:25
de作为词根除了“向下、消极、破坏”还有什么意思？presidential什么意思
2024年7月20日 05:34
hlookup函数和vlookup函数的区别（hlookup和vlookup区别是什么）
2024年5月18日 02:00
web项目有哪些（JavaWeb项目，其中，哪些技术是最基础、最重要的）
2024年7月19日 15:34
close与closely的区别（英语 close和closely的区别）
2024年7月22日 13:08
2024年7月21日 09:44
cancellation是什么意思（Cancellation invoice什么意思）
2024年7月4日 09:24
eventbus缺点（rxandroid和rxjava的区别）
2024年7月14日 21:23
2024年6月24日 15:42
2024年6月29日 20:50
2023年6月17日 09:40
