共计 1498 个字符，预计需要花费 4 分钟才能阅读完成。
背景介绍
实验室开发的一套课程实际平台，用于老师学生日常应用。
负责一个小局部，将一个显示性能做成一个子组件即可。
页面该当正确显示图示属性。
问题形容及剖析
一、第一次通过 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 组件什么时候会从新渲染？
