0301-组件基础-react-仿低代码平台项目

1 组件基础

React中一切都是组件，组件是React的基础。

• 组件就是一个UI片段
• 拥有独立的逻辑和显示
• 组件可大可小，可嵌套

组件的价值和意义：

• 组件嵌套来组织UI结构，和HTML一样。
• 组件拆分，利于代码维护和多人协作开发。
• 可封装公共组件（或第三方组件），复用代码，提高开发效率。

示例：创建问卷列表页面

import { useState } from "react";
import type { MouseEvent } from "react";import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";function App() {const [count, setCount] = useState(0);const fn = (e: MouseEvent<HTMLButtonElement>, name: string): void => {e.preventDefault(); // 阻止默认行为e.stopPropagation; // 阻止冒泡console.log("clicked");console.log("name: " + name);};const list = [{ name: "张三", age: 18 },{ name: "李四", age: 22 },{ name: "王五", age: 23 },{ name: "六子", age: 54 },];return (<><div><a href="https://vite.dev" target="_blank"><img src={viteLogo} className="logo" alt="Vite logo" /></a><a href="https://react.dev" target="_blank"><img src={reactLogo} className="logo react" alt="React logo" /></a></div><h1 style={{ color: "red", backgroundColor: "white" }}>Vite + React</h1><div><label htmlFor="name">姓名：</label><input id="name" type="text" /></div><div><buttontype="button"onClick={(e) => {fn(e, "button");}}>点击</button></div><ul>{list.map((user) => {const { name, age } = user;return <li key={name}>{age}</li>;})}</ul><div className="card"><button onClick={() => setCount((count) => count + 1)}>count is {count}</button><p>Edit <code>src/App.tsx</code> and save to test HMR</p></div><p className="read-the-docs">Click on the Vite and React logos to learn more</p></>);
}export default App;

拆分列表为列表组件和问卷卡片组件，列表组件如下：

import React, { FC } from "react";import QuestionCard from "./QuestionCard";
const List1: FC = () => {//列表页//问卷列表数据const questionList = [{ id: "q1", title: "问卷1", isPublished: false },{ id: "q2", title: "问卷2", isPublished: false },{ id: "q3", title: "问卷3", isPublished: true },{ id: "q4", title: "问卷4", isPublished: false },{ id: "q5", title: "问卷5", isPublished: true },];return (<div><h1>问卷列表页</h1><div>{questionList.map((q) => {const { id, title, isPublished } = q;return (<QuestionCardkey={id}id={id}title={title}isPublished={isPublished}/>);})}</div></div>);
};export default List1;

问卷卡片组件如下：

import React, { FC } from "react";import "./QuestionCard.css";type PropsType = {id: string;title: string;isPublished: boolean;
};const QuestionCard: FC<PropsType> = (props) => {const { id, title, isPublished } = props;//编辑问卷function edit(id: string) {console.log("id:", id);}return (<div key={id} className="list-item"><strong>{title}</strong>&nbsp;{/* 条件判断 */}{isPublished ? (<span style={{ color: "green" }}>已发布</span>) : (<span>未发布 </span>)}&nbsp;<button onClick={() => edit(id)}>编辑问卷</button></div>);
};export default QuestionCard;

2 组件props

在 React 中，Props（属性）是用于将数据从父组件传递到子组件的机制，Props 是只读的，子组件不能直接修改它们，而是应该由父组件来管理和更新。

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

详细可以参考下面链接2，上面我们函数组件通过参数传递方式传递（按需传递）props。

props传递可以通过…也可以单个props属性传递，建议**“按需传递”**。

3 React开发者工具

日常工作中，代码开发占很小一部分，其中调试是必不可少的。

为了方便调试开发React，这么我们以chome为例。

安装工具：

• chome应用商店或者第三方插件网站（参考下面链接3）

2个标签页：

• components：组件，可以搜索，查看指定组件的props,source等
• profiler：分析器

结语

❓QQ:806797785

⭐️仓库地址：https://gitee.com/gaogzhen

⭐️仓库地址：https://github.com/gaogzhen

[1]传递 Props[CP/OL].

[2]React Props[CP/OL].

[3]整理了几个Chrome插件的国内下载网站[CP/OL].