分而治之的思想
将一个复杂的问题拆分成许多小的问题,通过解决每一个小问题进而解决复杂的问题。比如:在求解大数问题上就用到了分而治之的思想。
组件化开发
组件:组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。
将一个完整的页面分成很多个组件,每个组件都用于实现页面的一个具体功能。而每一个组件还可以根据具体需求进行具体的划分,另外有的组件也可以在不同的页面进行复用
常见的组件
常见的组件有两种
- 类组件,也叫做有状态组件
- 函数组件,也叫做无状态组件
区别:
有状态组件:拥有状态、拥有生命周期、可以使用 this
无状态组件:不可以拥有状态、没有生命周期,不可以使用 this
无状态组件的性能比有状态组件的性能要高
类组件
定义的要求
- 组件的名称要以大写字符开头
- 类组件需要继承自 React.Component
- 类组件必须实现 render 函数
class App extends Component {
// 初始化数据
constructor() {
super();
// 组件内部的数据
this.state = {
message: 'hello'
}
}
render() {
return (
<div>
{
this.state.message}
</div>
)
}
}
render 函数的返回值
当 render 被调用时,它会检查 this.props 和 this.state 的变化并返回以下类型之一
- react 元素:通常通过 jsx 创建,比如
<div/>
会被 react渲染为 dom 节点,<MyComponentds/>
会被 react 渲染为 自定义组件;不论是上述的那个,它们都是 react 元素 - 字符串或数值类型:它们在 DOM 中会被渲染为文本节点
- 布尔类型或 null:什么都不渲染
- 数组或 fragments:使得 render 方法可以返回多个元素
- Portals:可以渲染子节点到不同的 DOM 子树中
函数组件
函数组件是使用function来进行定义的函数
特点
- 没有生命周期,也会被更新并挂载,但是没有生命周期函数
- 没有this(组件实例)
- 没有内部状态(state)
function App() {
return (
<div>
hhh
</div>
)
}
组件的生命周期
生命周期
从创建到销毁的整个过程,称之为是生命周期
生命周期的整个过程,分成了很多阶段
- 比如装载阶段(Mount),组件第一次在DOM树中被渲染的过程
- 比如更新过程(Update),组件状态发生变化,重新更新渲染的过程
- 比如卸载过程(Unmount),组件从DOM树中被移除的过程
生命周期函数
React内部为了告诉我们当前处于哪些阶段,会对我们组件内部实现的某些函数进行回调,这些函数就是生命周期函数
挂载卸载过程
constructor()
完成React数据的初始化,它接受两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。
注意:只要使用了constructor()就必须写super(),否则会导致this指向错误
componentWillMount()
已经不推荐使用了
componentDidMount()
- 依赖于DOM的操作可以在这里进行
- 在此处发送网络请求就最好的地方;(官方建议)
- 可以在此处添加一些订阅(会在componentWillUnmount取消订阅);
componentWillUnmount
清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等;
更新过程
componentDidUpdate
componentDidUpdate() 会在更新后会被立即调用,首次渲染不会执
行此方法
shouldComponentUpdate(nextProps,nextState)
主要用于性能优化,主要是返回值
组件之间的通信
父组件传递子组件
父组件通过 属性=值 的形式来传递给子组件数据,子组件通过 props 参数获取父组件传递过来的数据
class Child1 extends Component {
render() {
const {
name } = this.props
return (
<h2>子组件1:{
name}</h2>
)
}
}
function Child2(props) {
const {
name } = props;
return (
<h2>子组件2:{
name}</h2>
)
}
class App extends Component {
render() {
return (
<div>
<Child1 name="小冯1"