react基础笔记+类组件

React是用于构建用户界面的JavaScript库。

它是声明式地编写UI，什么是声明式？
命令式编程是告诉计算机怎么做（how），比如，我要先创建一个div，然后在div中输入XXX内容，最后把这个div插入到另一个dom节点中。
而声明式编程时告诉计算机我们要什么（what），比如，JSX语法，我们写一段代码，剩下的交给计算机底层方法去实现。

基于浏览器的模式，react.js提供react.js的核心功能代码，如虚拟DOM，组件等；
而ReactDom提供了于浏览器交互的DOM功能，如：dom渲染：ReactDom.render()。

JSX是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用
JSX注意事项：

• 必须有,且只有一个顶层的包含元素 - React.Fragment
• JSX 不是html，很多属性在编写时不一样
  • className
  • style
• 列表渲染时，必须有 key 值
• 在 jsx 所有标签必须闭合
• 组件的首字母一定大写，标签一定要小写

不同于Vue的插值表达式{{}}，react的插值表达式只是一个{}。
表达式：产生值的一组代码的集合，它可以原样输出字符串、数字，但是布尔值、空、未定义会被忽略。

XSS
为了有效的防止 XSS 注入攻击，React DOM 会在渲染的时候把内容（字符串）进行转义，所以字符串形式的标签是不会作为 HTML 标签进行处理的

和Vue一样，react也是将外部传入的数据写入props。

react它本身是单向数据流，只关注于视图的构建，不同于Vue的双向绑定，既关注视图，又关注数据。所以，在react中，如果修改了数据，需要再调用setState去修改state，所以react又被成为状态机，状态一变，视图就变。

setState的一些特性：
setState(updater, [callback])

• updater: 更新数据 FUNCTION/OBJECT
• callback: 更新成功后的回调 FUNCTION
• 异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能
• 浅合并 Objecr.assign()
• 调用 setState 之后，会触发生命周期，重新渲染组件

组件间通信：

• 父级向子级通信
  把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据
• 子级向父级通信
  在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消息

组件生命周期，比较常用的是：
加载阶段的render、componentDidMount
更新阶段的componentDidUpdate
删除阶段的componentWillUnmount

受控组件
在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
我的理解是：表单元素的状态受控于组件value，而表单元素的状态改变时，又改变了组件value，所以，形成了一个循环，而我们可以在循环中加入自己的业务逻辑。

key
key值的作用，在对比新旧虚拟DOM时作为独一无二的标记。
用索引值作为key，其实是不合适的，如果数据顺序变了，它会认为新旧虚拟DOM的同一索引值元素还存在，但是内容变了，所以又全部重新渲染。
最好的key值是数据的id。

ref
react和vue都不建议直接操作DOM，因为那样会消耗性能，所以，react定义了一个createRef方法，把创建的ref放到对应DOM的属性中，然后就可以通过this.ref名称.current拿到这个DOM节点。