React组件
文章目录
React组件有两种创建方式,分别是使用函数创建和使用类创建。
此二者一般称为函数组件和类组件。
当组件较多时可以把单独的每个组件抽离到单独的js文件中,方便调用和维护。
1 使用函数创建组件
-
函数名必须大写字母开头,作为渲染组件时的组件名
- React根据开头字母是否大写来区分组件和普通的react元素
-
函数组件必须有返回值,表示该组件的结构。
-
若无返回值,则表示不渲染任何内容。
import React from 'react'; import ReactDOM from 'react-dom'; function SayHello() { return ( <div>第一个函数组件</div> ) } //渲染组件 ReactDOM.render(<SayHello />, document.getElementById('root'))
2 使用类创建组件
使用ES6的class类创建组件
-
类名必须大写字母开头。
-
类组件必须继承React.Component父类,以使用继承来的属性和方法。
-
组件必须提供有返回值的render()方法,表示该组件的结构。
import React from 'react'; import ReactDOM from 'react-dom'; class Person extends React.Component { render() { return ( <div>第一个类组件</div> ) } } //渲染组件 ReactDOM.render(<Person />, document.getElementById('root'))
3 抽离组件到单独的js文件
独立的组件放到一个独立的js文件,然后暴露出去再渲染
//1、Person.js
import React from 'react';
class Person extends React.Component {
render() {
return (
<div>第一个类组件</div>
)
}
}
//暴露出组件
export default Person
//2、index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Person from './js/Person'
//渲染类组件
ReactDOM.render(<Person />, document.getElementById('root'))
4 有状态组件与无状态组件
- 函数组件又叫无状态组件。
- 类组件又叫有状态组件。
状态(state)即数据。
函数组件没有自己的状态,只负责数据的静态展示
类组件有自己的状态,负责动态更新UI。
5 组件中的state与setState
- 状态(state)即数据。
- state是组件内部的私有数据,只能在组件内部使用。
- state的值为对象。
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component {
/*constructor(){
super()
state = {
count:0
}
}*/
//简化语法初始化state
state = {
count: 0
}
addNum = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div>
<span>数据:{this.state.count}</span>
<button onClick={this.addNum}>+1</button>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Person />, document.getElementById('root'))
5.1 state的基本使用
- 获取状态:
this.state.count
5.2 setState()修改状态
- 不能直接修改state里面的值,修改状态要使用setState()方法
- 思想:数据驱动视图
- 修改状态:
this.setState({count:this.state.count+1})
- setState作用:1、修改state;2、更新UI。
6 高阶组件
6.1 概念
render props模式和高阶组件都可以实现组件状态逻辑复用。
- 高阶组件(HOC,Height-Order-Comonent)就是一个函数,接收要包装的组件,返回增强后的组件。
- 高阶组件内部创建一个类组件,在类组件中提供复用的状态逻辑代码,通过prop将复用的状态传递给被包装组件WrappedComponent
const EnhancedComponent = withHOC(WrappedComponent)
6.2 使用
使用步骤:
- 创建一个函数,名称约定以with开头。
- 指定函数参数,参数应该以大写字母开头,作为要渲染的组件。
- 在函数内部创建一个类组件,提供并返回复用的状态逻辑代码。
- 在类组件中渲染参数组件,同时将状态通过prop传递给参数组件。
- 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面上。
function withMouse(WrappedComponent){
class Mouse extends React.Component{
render(){
return <WrappedComponent {...this.state}/>
}
}
return Mouse
}
//获取增强后的组件
const MousePosition = withMouse(Position)
//渲染组件
<MousePosition/>
-
设置displayName
- 作用:便于调试时区分不同的组件,设置调试信息。
Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
-
传递props
- 问题:props丢失
- 原因:高阶组件没有传递props
- 解决方法:渲染WrappedComponent时,将state和thi.props一起传递给组件
<WrappedComponent {...this.state} {...this.props}/>