React高阶组件的一些个人理解

1.无状态组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;

}//这类组件没有自身的state

2.web组件

这类组件一般会有自身状态,他们可以通过setState()来更新自己的状态。我们一般使用这种组件去实现一些逻辑功能,他们可以使用无状态组件。当然了,他自己也可以给其他组件使用,这也体现了react组件良好的封装性。例如下面的组件:

class HelloMessage extends React.Component {

constrcutor(props){ super(props)};

componentDidMount(){}

  render() {

    return <div>

 <Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />

              </div>;

  }

}

这类组件中,我们可以干很多事情,例如和后台交换数据。几乎自己写的小demo都可以采用这种方式去更新自己,在钩子函数中拿数据,在事件处理函数中更新状态并发送数据给后台。例如:

class HelloMessage extends React.Component {

constrcutor(props){ super(props)};

componentDidMount(){

    let url = '//请求的后台路劲'

    fetch( url , {//配置参数

        method: "POST",

        header : { "content-type : application/json"} 

    }).then(response=>response.json()).then(json=>{

   //假设我们成功拿到了数据json

  this.setState({ json })//我们就可以在这拿到数据并设置成自身的state,render方法会被调用更新视图

 })

}

handleChange = () =>{}//如果需要和后台交互数据继续在这里发送fetch请求

  render() {

    return <div onClick={this.handleChange}>{this.state.json}</div>;

  }

}

这样我们就完成了一次完整的于后台交互的过程。我们只需要在handleChange方法中调用fecth就行了,拿到后台更新的数据后掉setState({})去更新视图。

3.高阶组件

在官方文档上,讲述了什么是高阶组件以及为什么要高阶组件。高阶组件可以认为是提升代码质量的一种手段(让你不去干重复的事情,何乐而不为呢?)。高阶组件不是组件,他其实是一个函数,这点一定要清楚,这样就可以开始写一个高阶组件了。

https://reactjs.org/docs/higher-order-components.html
function higherOrderComponent(WrappedComponent , [params]) {
  return class MyComponent extends React.Component {
    componentWillMount() {
      let data = fetch()//调用后拿到的数据给了data
      this.setState({data});
    }
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }

}

在上面这个高阶组件中,我们调用higherOrderComponent方法,就会得到一个有趣的组件。这个组件不仅包含了自身的所有属性,他还得到了一个props.data,这个属性中有fetch拿到的数据,我并没有使用第二个参数params,其实在这个例子中他就可以作为url传递给fetch的参数,这样,如果有2个组件需要拿数据的话,其实我们只需要调这个方法就可以了。在组件MyComponent 中,我们能做的当然不仅仅只是fetch一条数据这么简单!!!你完全可以定义一些事件函数!

为了更清楚的描述这种组件,我们采用一种清晰的定义方式

function higherOrderComponent = (params) => (WrappedComponent) =>{
  return class extends Component {
    componentWillMount() {
      let data = fetch()//调用后拿到的数据给了data
      this.setState({data});
    }
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }

}

对,是不是很熟悉,没错。redux中的connect方法就是这么干的

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)

在这里你就可以认为fetch拿到的数据挂载到WrappedComponent在connect方法中就是mapStateToProps方法干的事情,

而从store中拿方法给WrappedComponent就是mapDispatchToProps干的事情!!!很奇妙吧,我也觉得。。。这东西还会让我想起闭包~扯远了。在redux中 我们就是通过 const MyCompoenet  =  connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)得到一个连接好redux的store的组件的。如果你对redux不熟悉,那还在等什么,赶快学习吧!这里也是为了体现高阶组件的作用。在react-router中当你使用withRouter的时候,你会发现这也是高阶组件。。(这么啰嗦是因为真的用的多!)。

4.封装react组件(闲谈)

function MyComponent(props) {
    function handleChange (value) {
           props.handlechange(value)
    }  
      return (
        <div>
        <Component value={props.value} //绑定值
                    onChange={handleChange}
                    />
        </div>
      )    

  }

export defaule MyComponent;

当我们写好Component组件后,可以使用闭包的方式给Component组件暴露一些接口,上面的MyComponent方法就暴露了hangleChange这个接口。我们在外部,可以通过这种方式使用这个接口,

import MyComponent from '/path';

<MyComponent  hangleChange={//外部方法}  value = {//外部value}/>//暴露其他接口调用,这里只暴露2个接口,一个是用来处理value变化的,一个是绑定props的vaue的。相信你如果在学习封装的话会有启发咯

写的不好的希望多多指正,我也一直在学习react全家桶,想一起学习可联系我哦。一起加油!

展开阅读全文

没有更多推荐了,返回首页