react 复习（一）

 

关于state:

1   不能直接更新状态    

2    应该使用setState()     

3    构造函数是唯一能够初始化this.state的地方

4   状态更新可能是异步的 

5  状态更新合并 ：当调用setState()时，react将你提供的对象合并到当前状态，也可以独立更新

   

tip: 这里的合并就是说  this.setState({comments}) 完整保留了this.state.posts,完全替换了comments

6  数据自顶向下流动

eg: 父组件或子组件都不能知道某个组件是有状态还是无状态， 状态只为自身使用

      组件可以选择将其状态作为属性传递给子组件

7   事件处理

a:  React事件绑定属性的命名采用驼峰式写法

b: 采用jsx的语法需要传入 一个函数作为事件处理函数，而不是 一个字符串

c  不能使用返回false 阻止默认行为， 必须明确使用preventDefault

d  事件的绑定方式应该是 

e   事件处理程序传递参数

通过bind方式向监听函数传参，在类组件中定义监听函数，事件对象e要排在传递参数的后面

8   根据不同的state条件渲染

a    if

b     boolean &&   expression

c    三目运算符

组件的render方法返回null 并不会影响该组件的生命周期方法的回调

9  列表 && keys

当提取一个ListItem组件，应该把key保存在数组中的这个<ListItem .>元素上

       

 tip:key值在兄弟节点之间唯一

key会作为给react的提示，不会传递给你的组件， 如果组件中需要，需使用其他属性名显式传递这个值

10  表单

受控组件： input  textarea   select

非受控组件：  type="file"

11 状态提升 

eg:  几个组件需要共用状态数据，将这部分共享的状态提升至他们最近的父组件进行管理

12   组合  &  继承

eg: 类似于弹窗这种组件， 内部的内容是会发生变化，所以再调用的时候可以使用props.children 或者是 props.left  props.right

自己添加属性   这就是所谓的react组合

13  React 理念    数据流自顶向下传递

II:  高级react

1  灵活的组件名

2  jsx中的属性的几种不同方式

 

3  jsx 中传递子代  props.children

4  使用PropTypes检查类型

5  静态类型检查  使用typescript  代替  PropTypes

.ts是默认的文件扩展名， .tsx 是一个包含jsx代码使用的特殊扩展名

6  Refs & DOM 

Refs提供一种方式， 用于访问在render方法中创建的DOM节点或React元素

适合refs的情况：

如果可以通过声明式实现，尽量避免使用refs

7  性能优化

a  避免突变的数据  

shouldComponentUpdate 可以浅比较两者之间的区别， 但是如果是上面这种情况  ，words数组是同一个  所以添加了数组项后

不会更新页面  

所以需要使用下面的方式：

8  不适用ES6

9  Fragments

tip: tr中的div是无效的 ， 所以应该使用

tip: <></> 是 <React.Fragment />的语法糖

<></> 语法不能接受键值或属性， 需要一个带key的片段， 可以直接使用<React.Fragment />

10  高阶组件 

tip: 高阶组件是将一个组件转化成另一个组件