React-将页面部分内容做成子组件

背景介绍

实验室开发的一套课程实践平台，用于教师学生日常使用。
负责一个小部分，将一个显示功能做成一个子组件即可。

页面应当正确显示图示属性。

问题描述及分析

一、第一次通过npm install想把项目跑起来时，出现以下错误。

提示npm版本太老，于是试图更新npm，也提示更新失败，这时通过npm -v查看npm版本时又出现以下错误，说明npm已经被破坏。

于是卸载node.js重新安装，这时node -v可显示出来版本，但是npm -v依旧是上述错误。
后来经过网络查询，删掉了文件中的npm npm-cache两个文件，重新安装node.js，运行npm -v，即得到正确结果。

二、后缀jsx和js less和css结尾文件区别
看到代码中有些文件是以jsx less为后缀的，但是内容和JS CSS代码差不多一样，于是查找了他们之间的区别。

1.js，是一种直译式脚本语言
2.jsx，JavaScript XML是一种在React组件内部构建标签的类XML语 法。

less和Sass都是CSS延伸出的语言。
目的是为了方便前端开发，减少工作量。

LESS保留了css的任何功能，同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何时候随时切换到css的语法进行书写。

三、React.Component与React.PureComponent的区别

（React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过prop和state的浅对比来实现 shouldComponentUpate()。

如果React组件的 render() 函数在给定相同的props和state下渲染为相同的结果，在某些场景下你可以使用 React.PureComponent 来提升性能。

React.PureComponent 的 shouldComponentUpdate() 只会对对象进行浅对比。

React.PureComponent可以实现在state，props不变的情况下避免组件的重复渲染问题，当然它并不是万能的，它不能像shouldComponentUpdate实现自己定制化。

四、错误显示，试图直接在子组件获得相关数据，出现错误无法解决。

后来，直接在父组件预先获得属性放进一个对象，直接将对象传给子组件可正确显示。

 const reserachData = {
            moduleBelong: moduleInfomation,
            createTime: detailData.createTime,
            precondition: detailData.precondition,
            expectedStep: detailData.expectedStep,
            expectedResult: detailData.expectedResult,
        }
        return (
            <>
                <ReserachForm
                    reserachData={reserachData}
                />)

五、

React子组件重复渲染。

渲染函数的执行有两个缺点：

- React 必须在每个组件上运行其差异算法，以检查是否应更新 UI。
- 这些渲染函数或函数组件中的所有代码将再次执行。

每当组件状态改变时，React 都会调度渲染。
可通过以下两种方式对代码进行优化

• 空间何时更新组件
• 优化组件结构

六、将代码push到gitee出现以下问题。

将gitee注册时填写的邮箱地址改为公开，push成功。

参考文档

jsx和js后缀的区别
十分钟看懂Css、less和Sass（SCSS）的区别
React从渲染原理到性能优化（一）
react 重复渲染
react组件什么时候会重新渲染？