前端知识点总结之React

·  阅读 256

React props 和 state

props: 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流,所以props基本上也就是从服父级组件向子组件传递的数据。props经常被用作渲染组件和初始化状态,当一个组件被实例化之后,它的props是只读的,不可改变的。如果props在渲染过程中可以被改变,会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。
state: 一个组件的显示形态可以由数据状态和外部参数所决定,外部参数也就是props,而数据状态就是state。首先,在组件初始化的时候,通过this.state给组件设定一个初始的state,在第一次render的时候就会用这个数据来渲染组件。state不同于props的一点是,state是可以被改变的。不过,不可以直接通过this.state=的方式来修改,而需要通过this.setState()方法来修改state。当我们调用this.setState方法时,React会更新组件的数据状态state,并且重新调用render方法,也就是会对组件进行重新渲染。

React lifecycle

如图,可以把组件生命周期大致分为三个阶段:
第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;
第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。

JSX 是什么?

JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。

如何理解 React 的 vDom?为什么它会提高性能?

DOM(Document Object Model),简单说就是将一个HTML文档抽象表达为树结构。VDOM则是将DOM再抽象一层生成的简化版js对象,这个对象也拥有DOM上的一些属性,比如id, class等,但它是完全脱离于浏览器而存在的。
why vDOM?
当我们要修改DOM的某个元素时,我们需要先遍历找个这个元素,然后才修改能修改。而且如果我们大量地去修改DOM,每次DOM修改浏览器就得重绘(repaint)页面,有的时候甚至还得重排(reflow)页面,浏览器的重排重绘是很损耗性能的。
React是怎么用VDOM解决这个问题的呢?
首先,在React当我们要去修改数据或者收到新的props的时候, React根据新的数据生成一个新的VDOM,因为VDOM本质上只是一个普通的js对象,所以这个过程是很快的;
然后React拿着新生成VDOM和之前的VDOM进行对比(diff算法),找出不同的地方(新增,删除,修改),生成一个个的补丁;
最后React把这些补丁一次性打到DOM上,完成视图的修改。

PureComponent 和 Component 有什么区别?

React.PureComponent 与 React.Component 几乎完全相同,但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。
在PureComponent中,如果包含比较复杂的数据结构,可能会因深层的数据不一致而产生错误的否定判断,导致界面得不到更新。

讲讲 Redux(Redux 三原则)

单一数据源: 整个应用程序的state存储在单个store中的一个object tree中。这让同构应用(同构应用通俗的理解:前后端使用同一语言或技术进行开发)开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ,调试也变得非常容易。在开发中,通常将应用的 state 保存在本地,从而加快开发速度。
State 是只读的:
改变状态的唯一方法是发出一个action,一个描述发生了什么的对象。这样设计的好处在于,确保了视图和网络请求都不能直接修改 state,相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理,且严格按照一个接一个的顺序执行,因此不用担心 race condition 的出现。 Action 就是普通对象而已。同时通过这样的设计开发后期调试或测试时对于复现问题。
使用纯函数来执行修改:
为了可控的,详细的描述 action 如何改变 state tree ,需要开发人员自己完成 reducers 的编写工作。 Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。良好的应用设计实现中每一个reducer应该被设计为,分别独立地操作 state tree 的不同部分。因为 reducer 只是函数,所以开发人员可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的 reducer 来处理一些通用任务,如数据加载,分页等等。

理解单向数据流框架

首先父组件向子组件传值,可以通过属性传递。子组件向父组件传值,可以调用父组件传过来的函数。
单向数据流,是指父组件可以向子组件传递数据,但子组件不可以修改这些数据,否则会报错。

React 和 Redux 的关系?

react 和 redux本来是没有联系的,它们是通过 react-redux 来进行连接. redux是独立的应用状态管理工具。它是可以独立于react之外的。如果我们需要在react当中运用它,那么我们需要手动订阅store的状态变化,来对我们的react组件进行更新。react-reudx这个工具,就帮我们实现了这个功能,我们只需对store进行处理,react组件就会有相应的变化。
这个工具主要提供两个API:
connect
现在我们有了store,那么我们怎么才能在我们的组件中对它们进行操作呢?connect就为提供了这个功能。它接受mapStateToProps, mapDispatchToProps等作为参数。mapStateToProps这个函数,它接受store中的state作为参数,返回一个对象,属性就是state中我们需要的数据:mapStateToProps就将我们的state转换为了props对象。 同样的,我们可能需要在组件中对state进行处理。mapDispatchToProps就是帮助我们在组件中通过props调用dispatch来触发action的:最后我们调用connect这个方法,将mapStateToProps, mapDispatchToProps生成的props注入到需要使用它的组中.
provider
上面我们调用connect时,在mapStateToProps和mapDispatchToProps我们分别用到了store的state和dispatch。但是在组件中的store是哪里凭空冒出来的呢? provider就是来解决这个事的。Provider使它的子孙在调用connect方法时,都能获取到store。

React 有什么优点?Why React?

React 性能如何优化?
React refs 有什么用?
React HOC?
React component 的 key 有什么作用?
Class Component 和 Functional Component
props.children 是做什么的?
React 工作原理?
理解 setState() 是异步的?setState 的参数类型
setState 在哪些 lifecycle 中不能调用?
shouldComponentUpdate 有什么用?
React 的调和算法?
展示组件(Presentational component)和容器组件(Container component)之间有何不同?
何为受控组件(controlled component)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改