这篇文章主要介绍“react写法实例代码分析”，在日常操作中，相信很多人在react写法实例代码分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react写法实例代码分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
ref的奇怪用法
这是一段初看让人很困惑的代码：
function App() { const [dom, setDOM] = useState(null); return <div ref={setDOM}></div>;}让我们来分析下它的作用。
首先，ref有两种形式（曾经有3种）：
形如
{current: T}的数据结构回调函数形式，会在
ref更新、销毁时触发
例子中的setDOM是useState的dispatch方法，也有两种调用形式：
直接传递更新后的值，比如
setDOM(xxx)传递更新状态的方法，比如
setDOM(oldDOM => return )
在例子中，虽然反常，但ref的第二种形式和dispatch的第二种形式确实是契合的。
也就是说，在例子中传递给ref的setDOM方法，会在div对应DOM更新、销毁时执行，那么dom状态中保存的就是div对应DOM的最新值。
这么做一定程度上实现了感知DOM的实时变化，这是单纯使用ref无法具有的能力。
useMemo的奇怪用法
通常我们认为useMemo用来缓存变量props，useCallback用来缓存函数props。
但在实际项目中，如果想通过缓存props的方式达到子组件性能优化的目的，需要同时保证：
所有传给子组件的
props的引用都不变（比如通过useMemo）子组件使用
React.memo
类似这样：
function App({todos, tab}) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab]); return <Todo data={visibleTodos}/>;}// 为了达到Todo性能优化的目的const Todo = React.memo(({data}) => { // ...省略逻辑})既然useMemo可以缓存变量，为什么不直接缓存组件的返回值呢？类似这样：
function App({todos, tab}) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab]); return useMemo(() => <Todo data={visibleTodos}/>, [visibleTodos])}function Todo({data}) { return <p>{data}</p>;}如此，需要性能优化的子组件不再需要手动包裹React.memo，只有当useMemo依赖变化后子组件才会重新render。
到此，关于“react写法实例代码分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
