组件化:
用分而治之的思想去处理应用或页面，一个页面分成多组件，每个组件实现功能块，可以重复利用，便于维护，模块化和组件化的概念就是基于此。
vscode插件:ES7 React
掌握常见的快捷键:rcc、rpc等等
React中的组件化:
以定义方式来划分:
1.类组件
- 组件名称大写字符开头
- 类组件需要继承React.Component
- 类组件必须实现render函数
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<h2>类组件</h2>
</div>
)
}
}
2.函数式组件(不带hooks情况下)
- 函数的返回值与类组件render函数返回一样的内容
- 没有生命周期函数
- 没有this(组件实例)
- 没有内部状态(state)
export default function App(){
return(
<div>
<h2>函数式组件</h2>
</div>
)
}
render函数返回值:
可以返回常见的jsx创建的React元素、自定义组件、数组、fragments、Portals、字符串、数值类型、布尔、null。
//返回数组中间以逗号分割
export default class App extends Component {
render() {
return [
<div>
<h2>类组件</h2>
</div>,
<div>
<h2>类组件2</h2>
</div>,
];
}
}
类组件生命周期
常见的生命周期,装载阶段、更新阶段、卸载阶段
1.constructor
- 可以实现也可以不实现
- 初始化state
- 为事件绑定实例(this)
2.componentDidMount
- 依赖于DOM的操作在这进行
- 在此发送网络请求
- 在此添加一些订阅
3.componentDidUpdate
- 组件更新后立即被触发
- 首次渲染不会被触发
4.componentWillUnmount
- 执行必要的清理操作
- 清除Timer，取消网络请求，清除订阅
不常见的生命周期
1.getDerivedStateFromProps，state的值在任何时候都依赖于props；方法返回一个对象更新state；
2.getSnapshotBeforeUpdate ，更新前的回调，获取DOM更新前的信息（比如滚动位置）
3.shouldComponentUpdate ,优化性能时候经常用到
生命周期演示
//app.js
import React, {Component} from 'react';
export default class App extends Component{
constructor(){
console.log("执行constructor");
super();
this.state={
counter:10,
flag:true
}
this.addNum=this.addNum.bind(this);
}
render(){
return (
<div>
<h2>App组件:{this.state.counter}</h2>
<button onClick={this.addNum}>加1</button>
<hr/>
{this.state.flag && <Childtest/>}
</div>
)
}
addNum(){
this.setState({
counter:this.state.counter+1,
flag:!this.state.flag
})
}
componentDidMount() {
console.log("执行了componentDidMount");
}
componentDidUpdate(prevProps, prevState) {
console.log("执行了componentDidUpdate");
}
}
class Childtest extends Component {
render() {
return (
<div>
<h2>我是子组件</h2>
</div>
)
}
componentWillUnmount() {
console.log("子组件执行了componentWillUnmount");
}
}
组件通信:
我们知道组件之间是可以相互嵌套的，那么他们之间如何通信？
父子组件:
- 父传子(类组件)通信
-
父传子(函数组件)通信
父传子
//app.js
import React, { Component } from "react";
export default class App extends Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<div>
<h2>App组件</h2>
<hr />
<Childtest name="张三" age="18" heigt={1.88} />
<Childtest name="李四" age="19" heigt={1.89} />
<hr />
<Childtest2 name="王五" age="20" heigt={1.79} />
</div>
);
}
}
class Childtest extends Component {
//1、所有的属性都在props中，这是最完整的写法
// constructor(props){
// super();
// this.props=props;
// }
//2、实际上是父类保存了props(Component源码有写)，子类继承直接使用,不是通过super.props,依然还是用this.props使用
// constructor(props){
// super(props);
// }
//3、子类默认的构造方法就是上面那样实现的，所有可以直接省略
render() {
const { name, age, heigt } = this.props;
return (
<div>
<h2>我是类子组件:</h2>
<h3>
{name}---{age}--{heigt}
</h3>
</div>
);
}
}
function Childtest2(props) {
const { name, age, heigt } = props;
return (
<div>
<h2>我是函数子组件:</h2>
<h3>
{name}---{age}--{heigt}
</h3>
</div>
);
}
传值参数propTypes验证:
- 引入prop-types库
- 函数组件与类组件可添加propTypes设置验证规则，不通过规则则会控制台报警告
- 没有传值时，可设置默认值
-
类组件还可以通过static关键字来单独设置propTypes
验证不通过报错示意图
import React, { Component } from "react";
import PropTypes from 'prop-types';
export default class App extends Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<div>
<h2>App组件</h2>
<hr />
<Childtest name="张三" age={18} heigt={1.88} />
<Childtest name="李四" age="19" heigt={1.89} />
<Childtest/>
<hr />
<Childtest2 name="王五" age="20" heigt={1.79} />
<Childtest2 name="王五2" age={21} heigt={1.79} />
</div>
);
}
}
class Childtest extends Component {
render() {
const { name, age, heigt } = this.props;
return (
<div>
<h2>我是类子组件:</h2>
<h3>
{name}---{age}--{heigt}
</h3>
</div>
);
}
//es6中class fields写法
static propTypes={
age:PropTypes.number
}
// 注释掉下面的就会报错,可以看到props的验证效果
static defaultProps={
age:66
}
}
// 非static用法
Childtest.propTypes={
name:PropTypes.string.isRequired,
}
Childtest.defaultProps={
name:'默认小张',
age:25,
heigt:2.0
}
function Childtest2(props) {
const { name, age, heigt } = props;
return (
<div>
<h2>我是函数子组件:</h2>
<h3>
{name}---{age}--{heigt}
</h3>
</div>
);
}
Childtest2.propTypes={
name:PropTypes.string.isRequired,
age:PropTypes.number,
heigt:PropTypes.number
}
网友评论