react学习笔记_reactdom在渲染过程中只会更新改变了的部分-CSDN博客

本文链接：https://blog.csdn.net/wojiaomaxiaoqi/article/details/81635625

记录一下学习react过程中遇到的一些知识点。目前我是参照菜鸟教程http://www.runoob.com/react/react-tutorial.html去学习的。

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 特点
- 声明式设计 −React采用声明范式，可以轻松描述应用。
- 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 灵活 −React可以与已知的库或框架很好地配合。
- JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法。
除了函数外我们还可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props。
值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
JSX添加自定义属性需要使用 data- 前缀。
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式。
注释需要写在花括号中。
JSX 允许在模板中插入数组，数组会自动展开所有成员。
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。要渲染 React 组件，只需创建一个大写字母开头的本地变量。
我们可以使用函数定义一个组件，也可以使用 ES6 class 来定义一个组件。
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
在class方法中，继承是使用 extends 关键字来实现的。子类必须在 constructor( )调用 super( )方法，否则新建实例时会报错。
可以通过组件类的 defaultProps 属性为 props 设置默认值。
React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:React 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。
在 React 应用程序中，组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。我们可以在有状态组件中使用无状态组件，也可以在无状态组件中使用有状态组件。
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。
React 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。
你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。
通常我们会为事件处理程序传递额外的参数。例如，若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：
```
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
```
上述两种方式是等价的。
上面两个例子中，参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面。
在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用。
React组件API：设置状态：setState；替换状态：replaceState；设置属性：setProps；替换属性：replaceProps；强制更新：forceUpdate；获取DOM节点：findDOMNode；判断组件挂载状态：isMounted。
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
setProps设置组件属性，并重新渲染组件。replaceProps()方法与setProps类似，但它会删除原有 props。
forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。
isMounted()方法用于判断组件是否已挂载到DOM中。
组件的生命周期可分成三个状态：Mounting：已插入真实 DOM；Updating：正在被重新渲染；Unmounting：已移出真实 DOM。
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。