react入门系列之react特点归纳

2019-08-19 18:00:33 阅读：202 来源： 互联网

标签：入门 DOM dom react PropTypes 归纳组件 ###

### 声明式开发

- 命令式开发：原生js和jq写代码的时候，大部分代码都是在操作dom，这种开发模式就是命令式开发。 - 声明式开发：react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己回去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发。

### 可以和其他框架并存

- react所控制的dom就是id为root的dom，页面上的其他dom元素你页可以使用jq等其他框架。所以react是可以和其他框架并存的。

### 组件化

- 在我们写todo-list的时候，我们已经使用react的组件了。通过继承react的Component去创建一个组件。

### 单向数据流

- react是单向数据流，父组件传递给子组件的数据，子组件能够使用，但是不能直接通过this.props修改。否则会报错。（cannot assign to read only property ‘xxx’ of object ‘#object’） - 子组件要传值给父组件，或者要修改父组件的代码，都是要通过父组件传递过来的方法去实现。 - 这样的好处在于，让数据清晰代码容易维护，如果每个子组件都能直接修改父组件的数据，当子组件躲起来代码维护起来很麻烦。

### react是视图层框架

- 结合上面讲的单向数据流，如果是大型项目，非常多的子组件，要修改一个公共的参数，就需要很多层的传递才能完成一个数据变更。 - 单单react去做大型项目是不够的，他优势在于视图层的渲染，涉及到复杂的数据传递，还需要结合其他数据层的框架开发。如mox-box，redux。

### 函数式编程

- react项目中大部分都是函数，连html都是由render函数去实现的。 - 他的优势在于，方便代码维护，复杂的函数可以拆分成多个函数。 - 在前端自动化测试也很方便，只需要给函数一个参数，看他的输出就可以了。

### react开发调试工具

- react Developer Tools (需要翻墙，在谷歌浏览器应用商店)

### propTypes 与 DefaultProps

 1 /**
 2 - value: PropTypes.string.isRequired --> value是父组件传递过来的参数，子组件规定value必须是字符串，并且必须传递（isRequired）
 3 - deletItem: PropTypes.arrayOf(PropTypes.string,PropTypes.func) --> deletItem必须是方法，或者字符串
 4 */
 5 import React, {Component, Fragment} from 'react';
 6 import PropTypes from 'prop-types'; //引入propTypes
 7 class Item extends Component {
 8 deletItem = () => {
 9 const { deletItem, index } = this.props;
10 deletItem(index);
11 }
12 render(){
13 const { value } = this.props
14 return(
15 <Fragment>
16 <div
17 onClick = {this.deletItem}
18 >
19 {value}
20 </div>
21 </Fragment>
22 )
23 }
24 }
25 Item.prototypes = {
26 test: PropTypes.string.isRequired,
27 value: PropTypes.string.isRequired,//定义传递过来的value参数必须是字符串
28 deletItem: PropTypes.arrayOf(PropTypes.string,PropTypes.func),// 必须是方法或者字符串
29 index: PropTypes.number // 必须是数字
30 
31 }
32 Item.defaultProps = {
33 test: 'defaultProps' // 为test设置默认值，如果没有传入test，就使用这个默认值
34 }
35 export default Item

### Props，State 与 Render 函数之间的关系

- 数据变化为什么视图会变化？ - react的视图是通过Render函数去渲染的，组件当中，如果Props或者State有变化，Render函数就会重新执行一次。 - 父组件的Render重新执行，对应的他的子组件中的Render也会重新执行。

### 什么是虚拟DOM

1. 先有数据（state） 2. 模版（render中的jsx） 3. 数据 + 模版 = 生成真实Dom，来显示 4. state 发生改变 5. 数据 + 模版 = 生成真实Dom，替换原有的DOM - 缺陷：第一次生成真实dom，第二次又生成一个。最后替换。非常耗性能。 - 原因：生成一个完整的dom，和替换一个完整的dom，非常耗性能。并不是每次数据变化dom的所有内容都要变。

1. 先有数据（state） 2. 模版（render中的jsx） 3. 数据 + 模版 = 生成真实Dom，来显示 4. state 发生改变 5. 数据 + 模版 = 生成真实Dom，并不直接替换原始的DOM 6. 新旧DOM做对比，找差异。注意新的DOM其实是DoucumentFragment: 文档碎片并没有真实的挂载到页面上。 7. 找出input框发生变换 8. 只用新DOM中的input元素，替换掉老的DOM中的input元素。 - 缺陷：节约了完整dom替换的性能，但是消耗了对比的性能。效果不明显。

1. 先有数据（state） 2. 模版（render中的jsx） 3. 数据 + 模版 = 生成真实Dom，来显示 1. <div id='abc'><span>hello,world</span></div> 4. 生成虚拟DOM（生成虚拟DOM是一个js对象，用它来描述真是DOM）（损耗性能非常小） 1. ['div', {id: 'abc'}, ['span', {}, 'hello,world']] 5. state 发生改变 6. 数据 + 模版 = 生成新的虚拟DOM（极大提升了性能） 1. ['div', {id: 'abc'}, ['span', {}, 'bye，bye']] 7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容 8. 直接操作DOM改变span中的DOM - 优势: 1. 减少了对真实DOM的创建性能提高很大 2. js对象的比对非常不消耗性能的。 - 原因: 1. js去生产一个虚拟DOM其实就是一个js对象，而使用js去生成一个js对象是不怎么消耗性能的。 2. 对比上面两种方法，不仅减少了真实DOM的生产，同时也没有了真实DOM的对比，虚拟DOM对比也是非常节约新能的。

标签：入门,DOM,dom,react,PropTypes,归纳,组件,###
来源： https://www.cnblogs.com/boye-1990/p/11378552.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9