关于react.js: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 组件什么时候会从新渲染？

关于react.js:React将页面部分内容做成子组件

背景介绍

问题形容及剖析

参考文档