1. 项目起步

npx create-react-app news-manager

index.js中

reportWebVitals blog.csdn.net/qiuqiu1894/…
Google提出的检验用户体验的标准，可以通过控制台输出查看一些网页流畅度相关的数据。
删除包裹App的严格模式，防止React生命周期重复出现。

CSS模块化

在项目中，创建子组件Child.js，引入Child.css，再把子组件引入到父组件中，Child.css会覆盖App.css。
解决的办法是使用css模块化，把文件名改为Child.module.css
注意：module.css文件对标签选择器无效，必须使用id选择器或者类选择器。

在父组件中，import Style from 'Child.module.css'
item 是Css中的类选择器名 给标签加上对应的类名 <li className={Style.item}>111</li>

Scss引入和反向代理的配置（重点）

Json-server自己解决了跨域的问题。

路由架构

使用React router V6 版本

用Routes代替Switch包裹Route, component要替换为element 且里面必须包含的是标签。render也被element替代了。

React-RouteV6 中的路由都是精确匹配，因此如果父路由/根路由只写“/”作为路径的话会导致无法匹配到子路由，在后面加入* 通配符，可以完全匹配。

引入antd，页面基本布局

treeshaking 自带按需引入
组件的CSS样式写在外部文件中，通过import导入，antd5使用了新的theme.token，有待研究。

完善TopHeader组件

页面高度不足的问题，可以通过修改<div id="root"></div> 这个盒子的高度以及.ant-layout这个类选择器的高度为100vh来使用（antd5修改为100vh，antd4修改为height：100%）

（修改组件结构，让root盒子和section标签与body标签的高度一致）

2. SideMenu组件（重点）

编写CSS 加入logo 标题：新闻发布管理系统

使用Json-server启动后端，根据角色权限展示侧边栏

"json-server": "json-server ./src/db/db.json --watch --port 8000"

在package.json中编写脚本，命令行中输入 npm run json-server快速启动jsonserver服务器

用forEach遍历数组修改title字段为label字段。
这里也可以使用map方法，因为数组里都是对象，对象属于引用类型，引用类型作为参数都是引用传递，会改变实际的值。

修改了一下后端json的格式方便与新版本antdesign交互。

解决刷新页面后侧边栏高亮没有跟随页面路由的问题

使用useLocation钩子

const location = useLocation()

<Menu
    theme="dark"
    mode="inline"
    defaultSelectedKeys={[location.pathname]}
    items={menu}
    onClick={navigateToPage}
/>

设置defaultOpenkeys字段，获取/user-manage 这样的字段作为key，选择展开项。

最后把defaultSelectedKeys改为selectedKeys 让非受控组件变成受控组件。

3. 权限管理+AntDesign组件库Table组件

colunms确定每一列展示的数据，如果没有dataIndex, render函数的第一个参数就是这一整行的数据。如果有dataIndex，render函数的第一个参数就是dataIndex对应展示的数据，第二个参数是这一整行的数据。

观察Button按钮上绑定的onclick事件，如果需要传参的话就要写成箭头函数，箭头函数中调用函数的形式，如图。此时event参数位于箭头函数的参数内。

Table组件报错每一列没有独一无二的key的时候，在Table组件加入rowKey属性解决。

4. 角色管理 UserList

主体也是使用和权限管理一样的Table组件。
Antd5 的表单组件弹出模态框表单组件，

添加用户功能

在Table上方添加一个primray按钮

用useState设置一个boolean值，用于控制表单开启关闭。

const一个函数返回Modal组件 Modal组件中包含Form组件，相关属性都在这个函数中。注意该函数必须大驼峰命名，符合组件命名规范

添加用户的方法（即表单组件点击确定按钮后的回调函数写在onOK()中

编辑用户功能

编辑用户的表单创建方法与添加用户相似，区别在于editForm要单独拉出来放在外面，addUserForm不用。因为editForm需要在Modal被打开之后立刻展示原本的用户信息，所以要在外部能获取到editForm并填充上数据。
const [editForm] = Form.useForm()