函数组件
class类组件
区别:
class类组件负责复杂的业务逻辑处理
函数组件负责UI界面渲染的
函数组件的书写
//简单组件创建
function App() {
// UI模板
return (
<div>
<button>按钮</button>
</div>
);
}
//文件暴漏
export default App;
用法:
//引入的是组件
import App from '@/views/index';
class类组件的写法
//1.引入react框架中的组件
import React from 'react'
//class集成React Componet 之后 默认存在一个render函数
class Home extends React.Component {
//构造函数可以默认不写
//构造函数写了 必须super super() 相当执行父类的构造
constructor(){
super();
}
render(){
//在class类组件中this指向当前组件
console.log(this);
return (
<div>
<button>按钮</button>
</div>
)
}
}
export default Home;
函数组件和class类组件的this指向问题?
class类组件中的this指向当前组件
函数组件中的this指向undefined
开发中建议使用函数组件,主要原因是在react16.8版本之前是使用class组件写业务逻辑的,在16.8版本之后更新了一组hooksAPI ,函数组件使用hooks api 可以达到class类组件的功能。所以项目中推荐函数组件。
react中定义状态值
class组件:
快捷生成类组件安装vscode插件
![](https://i-blog.csdnimg.cn/blog_migrate/8770c5dde786e9142aa1ed26697e776f.png)
快捷键
imrc cccs
class Home extends Component {
//组件传的值在props上
constructor(props) {
//组件传值传递到父组件component
//component组件的构造中this.props=props;
super(props);
this.state = {};
}
render() {
return <div></div>;
}
}
备注:constructor 中的props 使用当前组件接收props传值,看到把props传递给父组件。
![](https://i-blog.csdnimg.cn/blog_migrate/8b21f47a9492c8f971c5814db564ab5c.png)
可以在当前的类组件中使用this.props获取组件传值。
this.state={
}
//声明clas组件的state数据源 key:value
class组件中的状态如何到模板中使用
组件的模板中绑定数据
render() {
console.log(this.state);
return <div>{this.state.msg}</div>;
}
//模板中绑定代码是{}
模板中绑定数据推荐使用
render() {
//获取state进行解构
let { msg } = this.state;
return <div>{msg}</div>;
}
定义的state
this.state = {
msg: "hello world!",
name: "btn",
cName: "link",
style: {
width: 100,//可以不带单位 默认px
height: 30,
},
height:30
};
render() {
//获取state进行解构
let { msg, name, cName, style,height} = this.state;
return (
<div>
{/* 直接绑数据 */}
<p>{msg}</p>
{/* 绑定元素属性 */}
<button name={name}>按钮</button>
{/* 绑定元素的class属性 */}
{/* ,class类名称直接解析 */}
<button className={cName}>按钮</button>
{/* 动态类+静态类切换 */}
<button className={[true ? "link bg" : "bg"]}>按钮</button>
<button className={true ? "bg link" : ""}>按钮</button>
{/* style属性绑定 */}
<button style={style}>按钮style</button>
<button style={{width:true?'30px':'50px',height:height}}>按钮style</button>
</div>
);
}
//注意 class类名称关键字 官方提示将元素的class属性换成className
class组件中使用json数据格式
需要注意不能直接绑定整个集合但是 可以直接绑数组。
//定义的数据格式
stuList: [
{
name: "小花",
sex: "男",
tel: 110,
},
{
name: "小花1",
sex: "男",
tel: 110,
},
{
name: "小花2",
sex: "男",
tel: 110,
},
],
//UI上使用map方法进行映射
<table>
<tbody>
{stuList.map((item, index) => {
return (
<tr key={index}>
<td>{item.name}</td>
<td>{item.sex}</td>
<td>{item.tel}</td>
</tr>
);
})}
</tbody>
</table>
数据中如果存在嵌套集合
<table>
<tbody>
{stuList.map((item, index) => {
return (
<tr key={index}>
<td>{item.name}</td>
<td>{item.sex}</td>
<td>{item.tel}</td>
<td>
{item.hobby.map((ho, hindex) => {
return <span key={hindex}>{ho}</span>;
})}
</td>
</tr>
);
})}
</tbody>
</table>
如果return返回模板标签返回 是多标签
![](https://i-blog.csdnimg.cn/blog_migrate/2f10dc89ee1a89bede8d75f8ce839cf0.png)
浏览器端会直接报错
![](https://i-blog.csdnimg.cn/blog_migrate/106b9a3a591ca69d34adc0368a9c4074.png)
处理方案
需要先引入react
import React, { Component } from "react";
{item.hobby.map((ho, hindex) => {
return (
//使用的是React.Fragment 内置组件
<React.Fragment key={hindex}>
<span key={hindex}>{ho}</span>
<span key={hindex}>{ho}</span>
</React.Fragment>
);
})}
如果项目中出现key值重复警告
![](https://i-blog.csdnimg.cn/blog_migrate/cc403f5f090836585967a34c247285a9.png)
<tr key={`t-${index}`}> //前面补个前缀 作为区分
出现这种错误是在虚拟DOM同级比对key时出现了相同的key,可以添加前缀区分。
条件判断json集合根据不同条件反模板
{stuList.map((item, index) => {
//条件判断
if (item.age <=10) {
return (
<tr key={index}>
<td>{item.name}</td>
<td>{item.sex}</td>
<td>{item.tel}</td>
<td>
{item.hobby.map((ho, hindex) => {
return (
<React.Fragment key={hindex}>
<span>{ho}</span>
<span>{ho}</span>
</React.Fragment>
);
})}
</td>
</tr>
);
}
else{
//return null 阻止模板渲染
return null;
}函数组件
class类组件
区别:
class类组件负责复杂的业务逻辑处理
函数组件负责UI界面渲染的
函数组件的书写
//简单组件创建
function App() {
// UI模板
return (
<div>
<button>按钮</button>
</div>
);
}
//文件暴漏
export default App;
用法:
//引入的是组件
import App from '@/views/index';
class类组件的写法
//1.引入react框架中的组件
import React from 'react'
//class集成React Componet 之后 默认存在一个render函数
class Home extends React.Component {
//构造函数可以默认不写
//构造函数写了 必须super super() 相当执行父类的构造
constructor(){
super();
}
render(){
//在class类组件中this指向当前组件
console.log(this);
return (
<div>
<button>按钮</button>
</div>
)
}
}
export default Home;
函数组件和class类组件的this指向问题?
class类组件中的this指向当前组件
函数组件中的this指向undefined
开发中建议使用函数组件,主要原因是在react16.8版本之前是使用class组件写业务逻辑的,在16.8版本之后更新了一组hooksAPI ,函数组件使用hooks api 可以达到class类组件的功能。所以项目中推荐函数组件。
react中定义状态值
class组件:
快捷生成类组件安装vscode插件
image-20220728160137485
快捷键
imrc cccs
class Home extends Component {
//组件传的值在props上
constructor(props) {
//组件传值传递到父组件component
//component组件的构造中this.props=props;
super(props);
this.state = {};
}
render() {
return <div></div>;
}
}
备注:constructor 中的props 使用当前组件接收props传值,看到把props传递给父组件。
image-20220728161008576
可以在当前的类组件中使用this.props获取组件传值。
this.state={
}
//声明clas组件的state数据源 key:value
class组件中的状态如何到模板中使用
组件的模板中绑定数据
render() {
console.log(this.state);
return <div>{this.state.msg}</div>;
}
//模板中绑定代码是{}
模板中绑定数据推荐使用
render() {
//获取state进行解构
let { msg } = this.state;
return <div>{msg}</div>;
}
定义的state
this.state = {
msg: "hello world!",
name: "btn",
cName: "link",
style: {
width: 100,//可以不带单位 默认px
height: 30,
},
height:30
};
render() {
//获取state进行解构
let { msg, name, cName, style,height} = this.state;
return (
<div>
{/* 直接绑数据 */}
<p>{msg}</p>
{/* 绑定元素属性 */}
<button name={name}>按钮</button>
{/* 绑定元素的class属性 */}
{/* ,class类名称直接解析 */}
<button className={cName}>按钮</button>
{/* 动态类+静态类切换 */}
<button className={[true ? "link bg" : "bg"]}>按钮</button>
<button className={true ? "bg link" : ""}>按钮</button>
{/* style属性绑定 */}
<button style={style}>按钮style</button>
<button style={{width:true?'30px':'50px',height:height}}>按钮style</button>
</div>
);
}
//注意 class类名称关键字 官方提示将元素的class属性换成className
class组件中使用json数据格式
需要注意不能直接绑定整个集合但是 可以直接绑数组。
//定义的数据格式
stuList: [
{
name: "小花",
sex: "男",
tel: 110,
},
{
name: "小花1",
sex: "男",
tel: 110,
},
{
name: "小花2",
sex: "男",
tel: 110,
},
],
//UI上使用map方法进行映射
<table>
<tbody>
{stuList.map((item, index) => {
return (
<tr key={index}>
<td>{item.name}</td>
<td>{item.sex}</td>
<td>{item.tel}</td>
</tr>
);
})}
</tbody>
</table>
数据中如果存在嵌套集合
<table>
<tbody>
{stuList.map((item, index) => {
return (
<tr key={index}>
<td>{item.name}</td>
<td>{item.sex}</td>
<td>{item.tel}</td>
<td>
{item.hobby.map((ho, hindex) => {
return <span key={hindex}>{ho}</span>;
})}
</td>
</tr>
);
})}
</tbody>
</table>
如果return返回模板标签返回 是多标签
image-20220728172052037
浏览器端会直接报错
image-20220728172113048
处理方案
需要先引入react
import React, { Component } from "react";
{item.hobby.map((ho, hindex) => {
return (
//使用的是React.Fragment 内置组件
<React.Fragment key={hindex}>
<span key={hindex}>{ho}</span>
<span key={hindex}>{ho}</span>
</React.Fragment>
);
})}
如果项目中出现key值重复警告
image-20220728172812307
<tr key={`t-${index}`}> //前面补个前缀 作为区分
出现这种错误是在虚拟DOM同级比对key时出现了相同的key,可以添加前缀区分。
条件判断json集合根据不同条件反模板
{stuList.map((item, index) => {
//条件判断
if (item.age <=10) {
return (
<tr key={index}>
<td>{item.name}</td>
<td>{item.sex}</td>
<td>{item.tel}</td>
<td>
{item.hobby.map((ho, hindex) => {
return (
<React.Fragment key={hindex}>
<span>{ho}</span>
<span>{ho}</span>
</React.Fragment>
);
})}
</td>
</tr>
);
}
else{
//return null 阻止模板渲染
return null;
}