直接去看书吧,我觉得不错,后面的摘录暂时先不补了,等全部看完后再抽取一些记录下
所谓组件,简单说,指的是能完成某个特定功能的独立的、可重用的代码。
React判断一个元素是 HTML 元素还是 React组件的原则就是看第一个字母是否大写。(看react官方文档也有提到,这里再记录一下)
-
在 HTML 中直接使用 onclick 很不专业,原因如下:(这些问题在 JSX 中都不存在)
- onclick 添加的事件处理函数是在全局环境下执行的,这污染了全局环境,很容易产生意料不到的后果;
- 给很多 DOM 元素添加 onclick 事件,可能会影响网页的性能,毕竟,网页需要的事件处理函数越多,性能就会越低;
- 对于使用 onclick 的 DOM 元素,如果要动态地从 DOM 树中删掉的话,需要把对应的时间处理器注销,假如忘了注销,就可能造成内粗泄漏,这样的 bug 很难被发现。
使用事件委托的性能当然要比为每个 onClick 都挂载一个事件处理函数要高。
React 控制了组件的生命周期,在 unmount 的时候,自然能够清除相关的所有事件处理函数,内存泄漏也不再是一个问题。
UI = render(data)
Web前端开发关于性能优化有一个原则:尽量减少DOM操作。虽然DOM操作也只是一些简单的 JavaScript 语句,但是 DOM 操作会引起浏览器对网页进行重新布局,重新绘制,这就是一个比 JavaScript 语句执行慢很多的过程。
React利用声明式的语法,让开发者专注于描述用户界面 “显示成什么样子”,而不是重复思考 “如何去显示” ,这样可以大大提高开发效率,也让代码更加容易管理。
作为一个合格的开发者,不要只满足于编写出了可以运行的代码,而要了解代码背后的工作原理;不要只满足于自己编写的程序能够运行,还要让自己的代码可读而且易于维护。
“差劲的程序员操心代码,优秀的程序员操心数据结构和它们之间的关系。” —— Linux Torvalds, Linux创始人
毫无疑问,如何组织数据是程序的最重要问题。
React组件的数据分为两种,prop 和 state,无论 prop 或者 state 的改变,都可能引发组件的重新渲染。prop 是组件的对外接口,state 是组件的内部状态,对外用 prop,内部用 state。
一个 React 组件通过定义自己能够接受的 prop 就定义了自己的对外公共接口。每个 React 组件都是独立存在的模块,组件之外的一切都是外部世界,外部世界就是通过 prop 来和组件对话的。
如果一个组件需要定义自己的构造函数,一定要记得在构造函数的第一行通过
super
调用父类也就是React.Component
的构造函数。如果在构造函数中没有调用supper(props)
,那么组件实例被构造之后,类实例的所有成员函数就无法通过this.props
访问到父组件传递过来的props
值。很明显,给this.props
赋值是React.Component
构造函数的工作之一。说是“傻瓜”,我倒是觉得这种纯函数实现反而体现了计算机编程中的大智慧,大智若愚。