render props的基本理解

最新推荐文章于 2024-09-25 19:31:31 发布

ikun不解释

最新推荐文章于 2024-09-25 19:31:31 发布

阅读量1.4k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_42309685/article/details/119039100

版权

本文介绍了Render Props的概念，通过实例展示了如何使用它实现组件状态的复用，特别是在获取鼠标位置的应用中。通过创建Cat, Mouse和MouseTracker组件，阐述了如何利用render props传递函数，动态决定渲染内容，从而避免硬编码并提升组件的灵活性。" 124513014,13218477,React状态逻辑复用与性能优化,"['react.js', 'javascript', '高阶组件', 'Hooks']

摘要由CSDN通过智能技术生成

render props

render props 实现组件state的复用

目标：获取鼠标位置
三个组件：Cat.js，Mouse.js，MouseTracker.js

// Mouse.js

import React, {
    useState } from 'react';

export default function Mouse(){
   
    const [ mousePosition, setMousePosition ] = useState[{
    x: 0, y: 0 }];

    function