react使用要点笔记

使用要点

1.react元素都是不可变的。当元素创建后无法改变其内容或者属性。目前更新界面的唯一变法是创建一个新元素,然后传入ReactDom.render()方法。

2.react只会更新必要的部分。react dom首先会比较内容元素内容先后的不同,而在渲染过程中只会更新改变了的部分。

3.jsx可以使用javascript表达式和注释,两者都需要写在花括号中,但是不能使用ifelse语句,可使用三元运算符来代替。(jsx就是javascript)

4.react使用组建的时候,自定义组建必须以大写字母开头,组建类只能包含一个顶层标签,添加属性时,class要写成className,for要写成htmlFor,因为这两个是javascript保留字。

5.挂载和卸载--->定时器被生成和清除

6.react数据单项流动,组建独立

7.react中state和props区别在于state是根据用户交互来改变,props是不可变的。

8.react中props验证器列表(React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。

MyComponent.propTypes={ 

//可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的 

optionalArray:React.PropTypes.array, 

optionalBool:React.PropTypes.bool, 

optionalFunc:React.PropTypes.func, 

optionalNumber:React.PropTypes.number, 

optionalObject:React.PropTypes.object,

optionalString:React.PropTypes.string, 

//可以被渲染的对象 numbers, strings, elements 或 array 

optionalNode:React.PropTypes.node, 

//React 元素 

optionalElement:React.PropTypes.element, 

//用 JS 的 instanceof 操作符声明 prop 为类的实例。 

optionalMessage:React.PropTypes.instanceOf(Message),

//用 enum 来限制 prop 只接受指定的值。 

optionalEnum:React.PropTypes.oneOf(['News','Photos']), 

//可以是多个对象类型中的一个 

optionalUnion:React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(Message)]), 

//指定类型组成的数组 

optionalArrayOf:React.PropTypes.arrayOf(React.PropTypes.number), 

//指定类型的属性构成的对象 

optionalObjectOf:React.PropTypes.objectOf(React.PropTypes.number), 

//特定 shape 参数的对象 

optionalObjectWithShape:React.PropTypes.shape({color:React.PropTypes.string,fontSize:React.PropTypes.number}), 

//任意类型加上 `isRequired` 来使 prop 不可空。 

requiredFunc:React.PropTypes.func.isRequired, 

//不可空的任意类型 

requiredAny:React.PropTypes.any.isRequired, 

//自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。 

customProp:function(props,propName,componentName){ 

if(!/matchme/.test(props[propName])){

returnnewError('Validation failed!'); } } } }

9.react事件采用驼峰命名法,事件必须在构造函数中绑定才能在构造函数中通过this去访问相关属性。通常有两种解决方式1.属性初始化语法.2.在回调函数中使用箭头函数(通常不建议使用这种方式绑定,当这个回掉函数作为属性值传入低阶组件,这些组件可能进行额外的重新渲染,当避免这类性能问题)。

10.react事件传入参数,参数放在event前面,回掉函数参数放在event后面,绑定方式回调函数处使用 bind或者箭头函数

运算符&& ---在javascript中 true && expression 总是返回expression, false&&expression总是返回false。

11.阻止组建渲染返回null即可实现,返回null并不会影响该组件生命周期方法的回掉。初始化数据简单的说就是清理残余数据。

13. 如果列表可以进行重新排序,不建议使用索引进行排序,因为这样会导致渲染很慢。

14.key应该保存在组建上,而不是组建中的元素上<=>在map内部调用元素时,切记在每个元素上面加上一个独一无二的key。

15.key在兄弟元素之间应该唯一,并非全局唯一。

16.key会作为给react提示,但不会传递给组建,如果使用和key相同值,将其作为属性传递。

17.jsx中可以出现任何表达式,但是{} 中不能出现var,const,let等这种关键字,表达式之间要用都好隔开。

18.setState是react中事件处理函数中和请求回调函数中触发UI更新的主要方法。

19.replaceState只会宝妞nextState中状态,原state不再nextState中的状态会全部被删除。(replaceProps同理)

20.forceUpdate(强制更新)应当少使用,尽量通过设置状态或者属性并由react触发render()调用。

21.如果组建以及挂载到dom中,findDomNode本地浏览器dom中的元素,如果组建返回null或者false,那么该方法也返回null。

22.isMounted(组建挂载状态)可以使用该方法保证setState和forceUpdate在异步场景下调用不会出错。

23.当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

猜你喜欢

转载自blog.csdn.net/zYjmor/article/details/84754915