React组件略讲
Posted chenwenhao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React组件略讲相关的知识,希望对你有一定的参考价值。
React是前端组件化开发的开山鼻祖,这种开发方式彻底解决了的前端组件复用的痛点。今天,就来研究一下React组件开发。
前端同学一般都会从Vue入门,因为Vue使用的<template>
的组件开发方式让前端人员更容易的平滑过渡。Vue的组件很简单,一般来说,一个.vue
文件就是一个组件。就像webpack
的模块化开发,一个文件就是一个组件。我们在使用组件时也很容易,通过 ES6 的import
导入、注册(components),就可以直接使用。
上面简单说了Vue的组件模式,其实,React的使用方式也差不多,毕竟是借鉴它的组件思想。最明显的差别就是声明方式,React用的是JSX语法,这让React变的很灵活。当然,使用方式的灵活也意味着使用者的脑子也要足够的灵活,从而增加了入门的难度。玩的6的人是真喜欢,未入门的是真不能理解为啥把html标签写到js里面呢。
好了,上面扯了那么多,下面就来一探React组件的究竟...
React组件基础
最开始,让我们先来了解一下React组件是如何定义的和分类的。
组件定义
React组件的声明方式有两种(React.createClass
已弃用):函数组件和class组件。它们的区别是什么呢?
如果一个组件只根据props渲染页面,没有内部状态state,我们完全可以用函数组件的形式来实现。也就是说,函数组件只是简单的负责展示数据,它里面没有生命周期函数和state状态,不能做业务逻辑处理。
函数组件(无状态组件):
import React from "react";
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class组件:
import React, { Component } from "react";
class Welcome extends React.Component {
constructor(props) {
super(props);
// 设置 initial state
this.state = {
text: props.initialValue || 'placeholder'
};
// ES6 类中函数必须手动绑定
this.handleChange = this.handleChange.bind(this);
}
handleClick(event) {
this.setState({
text: event.target.value
});
}
componentDidMount() {
// do something
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>;
<button onClick={this.handleClick}></button>
</div>
)
}
}
注意:
- React自义定的组件均为大写字母开头
- Props是只读的,如果要改变状态,需要使用状态提升
组件分类
React的组件分成两种类型:展示组件和容器组件。 将组件分成这两类之后,你会发现它们容易更被重用和理解。通常,展示组件负责展示内容,容器组件负责处理业务逻辑。是不是很像上面的函数组件和class组件的区别。
容器组件和展示组件名词都来自于redux中文文档。
展示组件
关注页面的展示效果(外观)
内部可以包含展示组件和容器组件,通常会包含一些自己的DOM标记和样式(style)
通常允许通过this.props.children方式来包含其他组件
对应用程序的其他部分没有依赖关系,例如Flux操作或store
不用关心数据是怎么加载和变动的
只能通过props的方式接收数据和进行回调(callback)操作
很少拥有自己的状态,即使有也是用于展示UI状态的
会被写成函数式组件除非该组件需要自己的状态,生命周期或者做一些性能优化
Example:Page、Header、Sidebar、List、UserInfo...
容器组件
关注应用的是如何工作的
内部可以包含容器组件和展示组件,但通常没有任何自己的DOM标记 (除了一些包装用的 div) ,并且从不具有任何样式
提供数据和行为给其他的展示组件或容器组件
调用Flux操作并将它们作为回调函数提供给展示组件
往往是有状态的,因为它们倾向于作为数据源
通常使用高阶组件生成,例如React Redux的connect(),Relay的createContainer()或Flux Utils的Container.create(),而不是手工编写
Example:UserPage、StoryContainer、 FollowedUserList...
- 优点
- 更好分离关注点。用这种方式写组件,可以更好理解你的应用程序和 UI
- 重用性高,展示组件可以用于多个不同数据源。
- 展示组件就是你的调色板,可以把他们放到单独的页面,在不影响应用程序的情况下,让设计师调整UI。
- 这迫使您提取诸如侧边栏,页面,上下文菜单等“布局组件”并使用this.props.children,而不是在多个容器组件中复制相同的标记和布局。
现在,我们已经知道了展示组件和容器组件的不同点。容器组件倾向于有状态,展示组件倾向于无状态,这不是硬性规定,因为容器组件和展示组件都可以是有状态的。 通常,展示组件被容器组件包裹的,因为容器组件内可以处理业务逻辑,将处理好的数据传递给展示组件。
当不重要或说很难分清时,不要把分离容器组件和展示组件当做教条, 如果你不确定该组件是容器组件还是展示组件是,就暂时不要分离,写成展示组件吧。
高阶组件
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。
具体而言,高阶组件是参数为组件,返回值为新组件的函数。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。还记得上面说的容器组件吗?高阶函数和容器组件有相似之处,都能将相同的逻辑抽离出来复用,都需要包裹展示组件。
高阶组件来源于javascript的高阶函数—— 高阶函数就是接受函数作为输入或者输出的函数。高阶组件仅仅只是是一个接受组件组作输入并返回组件的函数。看上去并没有什么,那么高阶组件能为我们带来什么呢?首先看一下高阶组件是如何实现的,通常情况下,实现高阶组件的方式有以下三种:
属性代理
操作props
const HOC = (WrappedComponent) =>
class WrapperComponent extends Component {
render() {
const newProps = {
name: 'HOC'
}
return <WrappedComponent
{...this.props}
{...newProps}
/>;
}
}
我们看到之前要传递给被包裹组件WrappedComponent的属性首先传递给了高阶组件返回的组件(WrapperComponent),这样我们就获得了props的控制权(这也就是为什么这种方法叫做属性代理)。我们可以按照需要对传入的props进行增加、删除、修改(当然修改带来的风险需要你自己来控制)。
? 抽象state
? 属性代理的情况下,我们可以将被包裹组件(WrappedComponent)中的状态提到包裹组件中,一个常见的例子就是实现不受控组件到受控的组件的转变。
class WrappedComponent extends Component {
render() {
return <input name="name" {...this.props.name} />;
}
}
const HOC = (WrappedComponent) =>
class extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
};
this.onNameChange = this.onNameChange.bind(this);
}
onNameChange(event) {
this.setState({
name: event.target.value,
})
}
render() {
const newProps = {
name: {
value: this.state.name,
onChange: this.onNameChange,
},
}
return <WrappedComponent {...this.props} {...newProps} />;
}
}
上面的例子中通过高阶组件,我们将不受控组件(WrappedComponent)成功的转变为受控组件。
? 组合方式
const HoC = (WrappedComponent, LoginView) => {
const WrappingComponent = () => {
const {user} = this.props;
if (user) {
return <WrappedComponent {...this.props} />
} else {
return <LoginView {...this.props} />
}
};
return WrappingComponent;
};
上述代码中有两个组件,WrappedComponent 和 LoginView,如果传入的props
中存在user
,则正常显示的 WrappedComponent 组件,否则显示 LoginView 组件,让用户去登录。HoC 传递的参数可以为多个,传递多个组件定制新组件的行为,例如用户登录状态下显示主页面,未登录显示登录界面;在渲染列表时,传入 List 和 Loading 组件,为新组件添加加载中的行为。
反向继承
反向继承是指返回的组件去继承之前的组件
操作props和state
在某些情况下,我们可能需要为高阶属性传入一些参数,那我们就可以通过柯里化的形式传入参数,例如:
import React, { Component } from 'React';
const HOCFactoryFactory = (...params) => {
// 可以做一些改变 params 的事
return (WrappedComponent) => {
return class HOC extends Component {
render() {
return <WrappedComponent {...this.props} />;
}
}
}
}
可以通过下面方式使用:
HOCFactoryFactory(params)(WrappedComponent)
这种方式是不是非常类似于React-Redux
库中的connect
函数,因为connect
也是类似的一种高阶函数。反向继承不同于属性代理的调用顺序,组件的渲染顺序是: 先WrappedComponent再WrapperComponent(执行ComponentDidMount的时间)。而卸载的顺序也是先WrappedComponent再WrapperComponent(执行ComponentWillUnmount的时间)。
总结
写到这里算是结束了,很简略地介绍了React的组件。文章虽短,希望能让你大概了解React组件的一些特征。最后总结一下:
React组件的声明方式用两种:函数组件和class组件。函数组件只有render一个返回函数,class组件可以有生命周期和其他业务逻辑处理函数
React组件从使用形式上分两种:展示组件和容器组件。基本原则:容器组件负责数据获取,展示组件负责根据props显示信息
React高阶组件就是参数为组件,返回值为新组件的函数。这样做的好处就是可以抽离一些相同的业务逻辑便于复用。作用类似Mixin,但避免了Mixin的副作用。
以上是关于React组件略讲的主要内容,如果未能解决你的问题,请参考以下文章
已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段
已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段