React-rende props_react rendeprops-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59755550/article/details/124204885

该篇博客探讨了在React中如何通过props传递回调函数实现组件间的交互，并强调了在事件处理中防止无限循环更新状态的重要性。文章还提到了代码优化措施，包括props验证和组件卸载时解除事件绑定，以确保应用的稳定性和性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React from 'react'
import ReactDOM from 'react-dom'
// class Mouse extends React.Component{
//   state={
//       x:0,
//       y:0,
//   }
//   handlemousemove=(e)=>{
//     this.setState({
//         x:e.clientX,
//         y:e.clientY,
//       })
//   }
//   componentDidMount(){
//       addEventListener('mousemove',this.handlemousemove)
//   }
//   render(){
//       console.log(this.props);
//       return this.props.render(this.state)
//   }
// }

// class App extends React.Component{
//     render(){
//         return(
//             <div>
//                 <Mouse render={(mouse)=><span>x:{mouse.x}y:{mouse.y}</span>}/>
//             </div>
//         )
//     }
// }
// ReactDOM.render(<App></App>,document.getElementById('root'))

// class Mouse extends React.Component{
//       state={
//           x:0,
//           y:0,
//       }
//       handlemousemove=(e)=>{
//         this.setState({
//             x:e.clientX,
//             y:e.clientY,
//           })
//       }
//       componentDidMount(){
//           addEventListener('mousemove',this.handlemousemove)
//       }
//       render(){
//           console.log(this.props);
//           return <span>x:{this.state.x}y:{this.state.y}</span>
//       }
//     }
    
//     class App extends React.Component{
//         render(){
//             return(
//                 <div>
//                     <Mouse/>
//                 </div>
//             )
//         }
//     }
//     ReactDOM.render(<App></App>,document.getElementById('root'))

class Mouse extends React.Component{
  state={
      x:0,
      y:0,
      z:0,
  }
  handlemousemove=(e)=>{
    this.setState({
        x:e.clientX,
        y:e.clientY,
      })
  }
  componentDidMount(){
      addEventListener('mousemove',this.handlemousemove)
  }
  render(){
      console.log(this.props);
      return this.props.render(this)
  }
}

class App extends React.Component{
    render(){
        return(
            <div>
                <Mouse render={(mouse)=>{
                    console.log(mouse);
                    mouse.setState({
                        z:1
                    });
                    return(<span>x:{mouse.state.x}y:{mouse.state.y}z:{mouse.state.z}</span>)
                }}/>
            </div>
        )
    }
}

ReactDOM.render(<App></App>,document.getElementById('root'))

渲染组件

1.直接渲染

2.通过props

使用2渲染组件，不可以调用组件自身的setstate防止无限循环，此时系统会自动报错

代码优化

1.添加props校验

// import Propetypes from 'prop-types'
// 此处需要从prop-types引入Propetypes

Mouse.prototype={
   render:Propetypes.func.isRequre
}

2.组件卸载时解除事件绑定

componentWillMount(){
    removeEventListener('mousemove',this.handlemousemove)
}

事件绑定在didmount,解绑在willmount