React
的核心思想就是组件化,相对于Vue
来说,React
的组件化更加灵活和多样。主要可以分为两大类:函数组件,类组件,这两大类组件的名称必须是大写字母开头
一、函数组件
函数组件通常是function
进行定义的函数,这个函数会返回和类组件中render
函数返回一样的内容
函数组件的特点:
- 没有生命周期,会被更新并挂载,但是没有生命周期函数
- 没有
this
(组件实例) - 没有内部状态(
state
)
函数组件的代码相对来说是简洁的,专注于
render
,且组件不需要实例化,整体渲染得到了提升,并且视图和数据解耦分离,输出只取决于输入
因为没有state
,只能通过props
获取属性内容并实现组件的更新,无生命周期
import React from 'react'
export default function App(){
render(){
return (
<div>Hello World!<div/>
)
}
}
注意:
当render
被调用的时候,会返回以下类型之一(同时还会检查this.props
,this.state
)
React
元素:- 数组或者
Fragments
:
使render
方法可以返回多个元素Portals
:
可以渲染子节点到不同的DOM
子树上- 字符串或数值类型:
在DOM
中会被渲染为文本节点- 布尔类型 或者
null
:
什么都不渲染
二、类组件
类组件的定义有两点要求,第一是需要继承自React.Component
,第二是必须实现render
函数
定义类组件的步骤:
constructor
是可以选择的,通常需要在这里初始化一些数据this.state
中维护的就是我们组件内部的数据render
方法是class
组件中唯一必须实现的方法
// index.js
import React from 'react'
import ReactDom from 'react-dom'
import App from 'App.js'
ReactDOM.render(<App />,document.getElementById('root'))
// App.js
import React,{Component} from 'react'
export default class App extends Component {
render(){
return(
<div>Hello World<div/>
)
}
}
类组件特点:
- 状态
state
是在constructor
中初始化的 - 成员函数不会自动绑定
this
,需要手动绑定才能获得当前组件实例对象
手动绑定this的方法:
- 可以在构造函数中完成绑定
- 可以在调用的时候使用
method.bind(this)
完成绑定- 使用箭头函数绑定
state
的变化会影响组件的渲染,因此不能把所有的变量都放到state
中,不然会造成一定的性能损失,下面情况都不应该作为一个状态放到state中:
- 通过
props
获取 - 该变量不在
render
中使用 - 整个过程不会发生改变
- 变量可以通过
props
和state
两者计算得出