共计 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 组件什么时候会从新渲染?