组件复用
React组件复用:复用state和操作state的方法
复用的两种模式:
1.render props模式
2.高阶组件
render props 给组件传递一个函数,函数的参数为组件的state,返回值为所需要渲染的结构。
class App extends React.Component{ render(){ return( <Child mouse={(s)=>{ return ( <h2>x:{s.x}y:{s.y}</h2> ) }} /> ) } } //这是需要复用的组件,作用是获取鼠标的位置 class Child extends React.Component{ state={ x:0, y:0 } componentDidMount(){ //创建一个监听鼠标位置的监听器,可以被多个需要获取鼠标位置的组件调用 window.addEventListener('mousemove',this.mouseMove) } mouseMove=e=>{ this.setState({ x:e.clientX, y:e.clientY }) } render(){ return this.props.mouse(this.state) } } ReactDOM.render(<App />,document.getElementById('root'))
高阶组件:
高阶组件是一个函数,接收的参数是一个需要增加功能的组件。
高阶组件的开头约定以with开头,函数参数以大写字母开头。
function withChild(App){ class Child extends React.Component{ state={ x:0, y:0 } componentDidMount(){ //创建一个监听鼠标位置的监听器 window.addEventListener('mousemove',this.mouseMove) } componentWillUnmount(){ //在组件关闭的时候关闭监听器 window.removeEventListener('mousemove',this.mouseMove) } mouseMove=e=>{ this.setState({ x:e.clientX, y:e.clientY }) } render(){ //将需要共享的状态作为参数传递给被包装的组件 return <App {...this.state}></App> } } return Child } class App extends React.Component{ render(){ return <h2>鼠标当前位置x:{this.props.x}y:{this.props.y}</h2> } } //获取增强后的组件 const Appplus =withChild(App) ReactDOM.render(<Appplus />,document.getElementById('root'))
为了便于区分增强后的组件,可以为组件设置displayName,设置的方法如下.
//以Child组件App组件为例 Child。displayName=`WithChild${getDisplayName(App)}`
这样每个创建的组件名称都会不同,当创建两个增强组件的时候就不会出现重复的名字.
高阶组件也可以向被包装的组件传递props,格式如下
return <App {...this.state}{...this.props}></App>
这样就可以在被包装的组件中接受props了
笔者也是第一次学习做出的总结,要是能从我这里得到一些帮助最好不过,若有错误还望大佬在评论帮忙指出。