第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件)

#受控组件

简而言之,就是受到状态state控制的表单,表单的值改变则state值也改变,受控组件必须要搭配onchange方法,否则不能使用

class App extends Component{
state={
text:''
}
control=(e)=>{
this.setState({text:e.target.value})
}
render(){
const{text} = this.state;
return <div>
<input type="text" value={text} onChange={(e)=>{this.control(e)}}/>
<p>{text}</p>
</div>
}
}
export default App
 

#高阶组件

#1 首先回顾一下什么是高阶函数

高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。

function a( functionName ){
functionName()
} function b(){
console.log('b')
} a(b) // a为一个高阶函数
 
#2 高阶组件

高阶组件是一个组件,它接收组件作为参数,并将组件作为输出返回


class Small extends Component{
render(){
return <h1>{this.props.text}</h1>
}
} //高阶组件
function High(Group){
class Height extends Component{
render(){
return <div>
<Group {...this.props}/>
</div>
}
}
return Height
}
//此时的small 经过进化已经不是原来的Small组件了
Small = High(Small); class App extends Component{
state={
text:'高阶组件'
}
render(){
return <div>
<Small text={text}/>
</div>
}
}
 

#children

在组件传值时,不光可以传递变量,函数,也可以传递标签,通常我们使用两种方式传递标签: 1 通过属性传递标签,子组件接收时使用this.props

class Text extends Component{
render(){
return <div>{this.props.hHtml}</div>
}
} class App extends Component{
render(){
return <div>
<Text hHtml={<h1>helloworld</h1>}/>
</div>
}
}
 

2 将组件写成双标签,包住要传递的标签,子组件接收时使用this.props.children

class Text extends Component{
render(){
return <div>{this.props.children}</div>
}
} class App extends Component{
render(){
return <div>
<Text>
<h1>helloworld</h1>
</Text>
</div>
}
}

react第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件)的更多相关文章

  1. React 精要面试题讲解(五) 高阶组件真解

    说明与目录 在学习本章内容之前,最好是具备react中'插槽(children)'及'组合与继承' 这两点的知识积累. 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密. 哦不好意 ...

  2. react第十单元(children的深入用法-React.Children对象上的方法)

    第十单元(children的深入用法-React.Children对象上的方法) #课程目标 理解什么是children 掌握React.Children对象上的方法 #知识点 什么是children ...

  3. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  4. react高阶组件

    高阶组件 为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念.所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装 ...

  5. React高阶组件总结

    在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...

  6. react高阶组件的一些运用

    今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...

  7. ES 6 装饰器与 React 高阶组件

    关于 Decorator 到底是 ES 6 引入的还是 ES 7 引入的我也不是很明白了,两种说法都有,这种问题懒得纠结了--在用的时候发现这个东西很好用,平常用处可能不大,但是结合 React 就很 ...

  8. react系列(二)高阶组件-HOC

    高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...

  9. React躬行记(10)——高阶组件

    高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中 ...

随机推荐

  1. 阿里面试官:小伙子,你给我说一下JVM对象创建与内存分配机制吧

    内存分配机制   逐步分析 类加载检查: 虚拟机遇到一条new指令(new关键字.对象的克隆.对象的序列化等)时,会先去检查这个指令的参数在常量池中定位到一个类的符号引用,并且这个符号引用代表的类是否 ...

  2. On Starting My Blogging On CNBlogs

    About Myself I am a would-be Master of Engineering, on the last year of my student life, I'm ambitou ...

  3. 如何调整MathType公式的字体大小

    作为一名理科生,想必大家都在为编辑公式而烦恼,在Word中要想完美插入公式,还真不是那么简单的.首先要使用专业的公式编辑器MathType,其次还要对公式的大小进行修改,这样才能看起来是相融合的文章. ...

  4. CorelDRAW 2017提示已安装另一版本导致安装失败的解决办法

    Coreldraw提示"由于您已安装了另一版本,因此无法安装本产品.要安装本产品,您必须首先卸载现有版本"的情况在Coreldraw X8及Coreldraw 2017上都存在,下 ...

  5. objetive-C中属性变量和成员变量

    属性变量 @property和@synthesize可以自动生成某个类成员变量的存取方法. readwrite:这个属性是默认的情况,会自动生成存取器 assign:这个属性一般用来处理基础类型,比如 ...

  6. Linux中redis服务开启docker运行redis并设置密码

    //查询目前可用的reids镜像 docker search redis //选择拉取官网的镜像 docker pull redis //查看本地是否有redis镜像 docker images // ...

  7. 败家玩意儿!Redis 竟然浪费了这么多内存!

    作为内存数据库,内存空间大小对于 Redis 来说是至关重要的.内存越多,意味着存储的数据也会越多.但是不知道你有没有遇到过这样的情况,明明空间很大,但是内存的使用却不是很理想. 为什么会出现这样的情 ...

  8. maven私服拉取jar失败(内网)

    解决方案: 1.私服没jar,找私服负责人添加 2.私服有拉不下来,重启nexus服务端(负责人做) 3.本地有jar但是idea中没找到,先执行一下reimport,不行的话,随意修改下pom文件, ...

  9. Python运算符的优先级是怎样的?

    优先级数字越高表示优先级越高,有关运算符的详细介绍请参考<Python运算符大全>

  10. 第11.20节 Python 中正则表达式的扩展功能:后视断言、后视取反

    一. 引言 在<第11.19节 Python 中正则表达式的扩展功能:前视断言和前视取反>中老猿介绍了前视断言和前视取反,与二者对应的还有后视断言和后视取反. 二. (?<=-)后视 ...