react学习笔记

原创 友目大爻 教程 学习教程 65阅读 2019-03-13 11:19:43 举报

官网代码:

重点学习心得:
1.React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分,将界面视为一个个特定时刻的固定内容(就像一帧一帧的动画),而不是随时处于变化之中(而不是处于变化中的一整段动画)。
2.组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。
3.组件名称必须以大写字母开头。
4.组件的返回值只能有一个根元素。所以要用一个<div>来包裹所有组件元素。
5.所有的React组件必须像纯函数那样使用它们的props,即不能改变props,纯函数:不改变它自己的输入值。

6.类定义组件和函数定义组件区别:
类定义组件允许我们使用其它特性,例如局部状态、生命周期钩子。
7.this.props和this.state可能是异步更新,可使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数,将此次更新被应用时的props做为第二个参数:

8.状态通常被称为局部或封装。 除了拥有并设置它的组件外,其它组件不可访问。
9.在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为,你必须明确的使用 preventDefault。
10.e 是一个合成事件,不需要担心跨浏览器的兼容性问题,react封装了浏览器原生事件对象,并对浏览器做了兼容,和浏览器原生事件对象有相同的接口,如果出于某些原因想使用浏览器原生事件,可以使用 nativeEvent 属性获取。
11.类的方法必须绑定this,必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。通常情况下,如果你没有在方法后面添加 () ,例如 onClick={this.handleClick},你应该为这个方法绑定 this。
(1)在构造函数中使用bind绑定this

(2)在调用的时候使用bind绑定this

(3)在调用的时候使用箭头函数绑定this

(4)使用属性初始化器语法绑定this(实验性)

比较:
方式2和方式3都是在调用的时候再绑定this。
优点:写法比较简单,当组件中没有state的时候就不需要添加类构造函数来绑定this
缺点:每一次调用的时候都会生成一个新的方法实例,因此对性能有影响,并且当这个函数作为属性值传入低阶组件的时候,这些组件可能会进行额外的重新渲染,因为每一次都是新的方法实例作为的新的属性传递。
方式1在类构造函数中绑定this,调用的时候不需要再绑定
优点:只会生成一个方法实例,并且绑定一次之后如果多次用到这个方法也不需要再绑定。
缺点:即使不用到state,也需要添加类构造函数来绑定this,代码量多一点。。。
方式4:利用属性初始化语法,将方法初始化为箭头函数,因此在创建函数的时候就绑定了this。
优点:创建方法就绑定this,不需要在类构造函数中绑定,调用的时候不需要再作绑定。结合了方式1、方式2、方式3的优点
缺点:目前仍然是实验性语法,需要用babel转译。
总结:
方式1是官方推荐的绑定方式,也是性能最好的方式。方式2和方式3会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。方式4目前属于实验性语法,但是是最好的绑定方式,需要结合bable转译。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复