REACTjs学习笔记-16.2.0

1。jsx:jsx执行更快,编译为js代码后进行了优化,而且在编译过程中就能发现错误。注:可以防止用户输入数据的数据注入(受控组件)

diff算法

2。react组件:单个组件-类组件与函数组件

复合组件-按功能分复合组件(组合或继承)与高阶组件

表单元素-按事件处理-分为受控组件或非受控组件

是否用react中的state或方法来控制输入的数据

props:组件对外的接口

state:组件内部状态

3.render:null或false不渲染界面,默认返回一个jsx表示的对象,由react库来根据返回的对象判断如何渲染。

null从组件的render方法返回不会影响组件生命周期方法的触发组件能够隐藏自身

false:不渲染组件

划分组件边界的原则

react组件的数据种类

4.react组件的生命周期

高阶组件(又叫参数化的容器组件)-》包裹组件-》子组件(需要渲染的界面)

高阶组件参数(需渲染的包裹组件,获取数据的方法)不修改子组件,对包裹组件注入不相关得props传入state或实例方法

6。分条件渲染组件

7.组件的列表和键

8.受控组件

对于受控组件,每个状态变异都会有一个关联的处理函数。这使修改或验证用户输入变得非常简单。

不受控组件

因为值是只读的,react中其值不受控制

要编写一个不受控制的组件,而不是为每个状态更新编写一个事件处理程序,可以使用ref从DOM获取表单值。

9.提升状态

首先将状态添加到需要渲染的组件中。然后,如果其他组件也需要它,可以将它提升到最接近的共同祖先。不要尝试同步不同组件之间的状态,而应该依靠自顶向下的数据流。

即:把2个子组件共享的数据回传给共同显示的父组件来处理数据

10.组件嵌套修改

通过props.children传递子组件或者属性里写组件来修改包裹组件里的内容

组件可以接受任意道具,包括原始值,React元素或函数。

如果您想在组件之间重用非UI功能,我们建议将其解压缩到单独的JavaScript模块中

11.组件的设计规则

①将ui分解为组件层次结构

②构建静态版本-无状态的自上而下或自下而上按层次构建

③确定ui的最小化的state变量

④确定state属于哪个组件

⑤添加反向数据流-设计交互

二。高级react

2.1jsx

组件是由元素构成的。元素数据结构是普通对象,而组件数据结构是类或纯函数。

react元素包括:表达形式的标签变量、html标签元素、组件。即:可以通过react顶层api将其转化为dom元素并呈现

React 组件是MyComponent,React 元素就是

const element = I'm element。

②使用点语法(对象形式)按条件渲染嵌套组件-运行时选择类型

import{PhotoStory,VideoStory}from'./stories';

constcomponents={photo:PhotoStory,video:VideoStory};

functionStory(props){// Wrong! JSX type can't be an expression.return  ;}

表达式属性传入-其中以子组件传入最有用

2.2proptypes类型检查

3.修改数据的另一种方法-ref 还有一种是数据流中的state

对于refs有几个很好的用例:

管理焦点,文本选择或媒体播放。

触发命令式动画。

与第三方DOM库集成。

ref:该ref属性采用回调函数,并且在组件挂载或卸载后立即执行回调。

ref回调之前被调用componentDidMount或componentDidUpdate生命周期钩。

3.1使用ref回调来设置类的属性是访问DOM元素的常用模式。

注意:

参考和功能组件

您不能ref在功能组件上使用该属性,因为它们没有实例:1.如果需要引用组件,则应该将组件转换为类2.只要您引用DOM元素或类组件,就可以在功能组件内使用该ref属性

3.2将DOM Refs公开给父组件

间接的实现父子组件传数据

4.不受控组件

其中表单数据由DOM本身处理,以使用ref从DOM获取表单值。

始终是一个不受控制的组件,因为它的值只能由用户设置,而不是以编程方式设置。

5.优化性能

1.可以通过安装适用于Chrome的React Developer Tools进行检查

与您的页面进行交互,您应该看到任何重新呈现的组件周围都会出现彩色边框。这可以让你发现没有必要的重新渲染

2.使用Chrome性能标签分析组件

3.使用shouldComponentUpdate检查,避免不必要的渲染

diff算法

1.先检查2个树形节点根节点类型是否相同

不同直接重新装载dom元素不同,类组件不同

2.类型相同

①dom元素保留元素,更新div属性与内容

②组件类型

递归更新节点的属性,根据新节点的props去更新

比较状态

react4个属性 key、ref、props、类型type

优化:

避免不必要的render(用户的输入进行限制)

shouldupadate控制不必要的更新

setstate的控制以及组件输入的限制(props与state控制)

回调与绑定

合理拆分组件state数量控制

减少组件之间的依赖

你可能感兴趣的:(REACTjs学习笔记-16.2.0)