react中的render-props模式_(1)

 <Mouse render={(mouse) => {}} /> 

• 如何渲染到任意的UI
  • 使用该函数的返回值作为要渲染的UI内容

 <Mouse render={(mouse) => {
     return <p>
         x: {mouse.x}
         y: {mouse.y}
     </p>
  }} /> 

使用步骤

• 创建Mouse组件，在组件中提供复用的逻辑代码
• 将要复用的状态作为 props.render(state)方法的参数，暴露到组件外部
• 使用props.render() 的返回值作为要渲染的内容

  render() {
    // return (
    //   <div>
    //     {/* mouse */}
    //     x: {this.state.x}
    //     y: {this.state.y}
    //   </div>
    // )
    return this.props.render(this.state)
  }
​

示例demo

class Mouse extends React.Component {
    // 鼠标位置状态
    state = {
        x: 0,
        y: 0
    }
​
    // 监听鼠标移动事件
    componentDidMount(){
        window.addEventListener('mousemove',this.handleMouseMove)
    }
    handleMouseMove = e => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        })
    }
    render(){
        // 向外界提供当前子组件里面的数据
        return this.props.render(this.state)
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                App
                <Mouse render={mouse => {
                    return <p>X{mouse.x}Y{mouse.y}</p>
                }}/>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

children代替render属性

• 注意：并不是该模式叫 render props就必须使用名为render的prop，实际上可以使用任意名称的prop
• 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做： render props模式
• 推荐：使用childre代替render属性

 <Mouse>
  {
    ({ x, y }) => {
      return (
        <p>
          x: {x}
          y: {y}
        </p>
      )
    }
  }
</Mouse>

Mouse组件内部的render修改为：

  render() {
    // return (
    //   <div>
    //     {/* mouse */}
    //     x: {this.state.x}
    //     y: {this.state.y}
    //   </div>
    // )
    return this.props.children(this.state)
  }

优化代码

• 推荐给render-props模式添加props校验

​
  static propTypes = {
    children: PropTypes.func.isRequired
  }
​

• 当组件移除时候解绑事件

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handleMouseMove)
  }

还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！

王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。

对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！

【完整版领取方式在文末！！】

93道网络安全面试题

内容实在太多，不一一截图了

黑客学习资源推荐

最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

1️⃣零基础入门

① 学习路线

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

② 路线对应学习视频

同时每个成长路线对应的板块都有配套的视频提供：