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.htmlfunction 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全家桶,想一起学习可联系我哦。一起加油!