React中的三种类型组件介绍
React从诞生到现在,越来越多的前端开发者喜欢上该框架,其原因有很多,其中一个主要的原因是因为它的组件很灵活,而本博客主要介绍React的三种类型的组件:受控类型,无状态类型,高阶类型。 在讲组件之前,先介绍一下React组件的两个重要特性:
现在开始步入主题了
A)非受控组件 <component defaultVaule='' /> 缺点:组件的变化不容易管理;
B)受控组件 组件的值----state控制; 组件值得变换---通过触发onChange事件,然后由this.setState负责改变; demo:
定义:若一个组件不含有状态和对状态的处理,则可以将render方法单独抽取出来,成为一个独立的组件函数; 特点: 作用:
注意: demo:
定义:一个包含了另一个React组件的React组件;本质上就是一个函数.
包装方式:属性代理和反向代理;
定义:高阶组件接受外界实行,然后通过包装环境传递给被包装组件; function HOC(Com) { 其他处理; return class [Name] extends Component { constructor(props) { super(props); } render() { return ( <div> <Com {...this.props} /> </div> ) } } } Name:可以指定返回组件的名称;
定义:指定的组件作为另一个组件的父类,而继承了的组件就是一个高阶组件 function HOC(B){ return class [A] extends B{ render(){ return super.render(); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |