背景介绍

实验室开发的一套课程实际平台，用于老师学生日常应用。
负责一个小局部，将一个显示性能做成一个子组件即可。

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

问题形容及剖析

一、第一次通过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组件什么时候会从新渲染？