回顾学习react (1)

总结来源： 掘金作者 itclanCoder

1. reactJS 是什么

用于构建用户界面的javascript库,MVC架构中的V层

• 声明式开发

面向数据编程,只要把数据构建好了就可以了的,react会自动的帮你去构建网站,把数据可以理解为图纸,图纸做好了之后,react会自动的结合这张图纸帮助你去构建这个大厦,去构建整个页面的DOM,数据是什么,页面就显示什么,这种声明式的开发帮助我们节约掉大量的DOM操作代码,这是react编程带来的一个优势)

2. react 可以做什么

• 写web应用(网站,pc端,移动端等,例如:知乎,简书等)
• 桌面客户端应用软件(类似vscode或者一些报表软件携带窗口的应用)
• webApp--react native,混合开发应用。目前已经开发了RN 项目，0.59版本支持了HOOKs。如果熟练了react，开发RN 不是问题
• 服务器端应用(java,php等后端语言能干的事情,react也能干)

3. react 中的组件

我个人的理解，react组件Component不是UI组件，它是将某个特定的功能独立，可以重复使用的代码。 把一个大的应用分解成若干个小的组件，每个组件只需要关注小范围的特定功能就可以了。
react 应用就是由组件构建成的。非常适合用户交互组件

4. react 特点

• 虚拟DOM

通过DOM-DIFF方法算法，智慧更新由差异的部分，不用渲染整个页面，提高效率

• 组件化

把页面分成若干个组件,组件中包含逻辑结构和样式 组件只包含自身逻辑,更新组件的时候可以预测,利于维护整个页面拆分多个组件,可以做到重用
单项数据流

• 单向数据流(父组件允许向子组件传值,但是子组件你只能去使用父组件),子组件并不能直接的去改写这个值,只能单向的传递,但是你不能反过来的给我修改,想要达成这一目的,子组件调用父组件的方法,通过在父组件中改变自己来操作,维护代码起来比较方便)
• 可以与其他框架并存(Jq,Angular等) 数据是从顶层组件传递到子组件中 数据可控

5. JSX 语法

JSX也是一个表达式，它不支持if/for,但是它在if,for循环的代码中可以JSX的，将JSX复制给变量，把JSX当作参数传入,以及从函数中返回JSX

function getMessage(user) {
  if (user) {
    return <h1>Hello, { formatName(user) }!</h1>;
  }
  return <h1>Hello, itClanCoder.</h1>;
}

6. react 优势 响应式编程，

• react 写法中，并没有操作DOM，而是一切以数据味中心，数据是什么，页面就现实什么。这种方式更容易管理，react只是作用域试图UI层的渲染工作，我们管线的渲染成什么样子。不需要去关心它到底是怎么渲染的。

UI = render(data)

• 这个等号左边UI用户界面的显示取决于等号右边的render函数,这个render函数接收一个数据data作为参数,这个函数是一个纯函数,也可以称为是无状函数(函数式组件)
• 使用无状态组件(函数组件),它的性能是高于普通组件的,因为它是函数,而用class类定义的组件，类生成的对象里面有生命周期函数,所以它执行起来肯定没有函数组件(UI组件)快
• 对于我们开发来说,最重要的是区分哪些是属于data,哪些是属于render,想要更新用户界面,要做的是更新data,用户的界面自然会做出响应,所以把React称为响应式编程(面向数据编程)
• 尽管每一秒我们都会新建一个描述整个 UI 树的元素,但是React DOM 只会更新实际改变了的内容，也就是上面中的文本节点

这是因为React利用Virtual DOM,让每次渲染都只重新渲染最少的DOM元素
而操作DOM会引起浏览器对网页进行重排重绘。

• 引发的都是React组件的重新渲染,它只会修改数据变化的的DOM部分,并不需要去关心怎么去操作DOM

• 它是对DOM树的一种抽象,本质上就是一js对象,当进行视图的改变时,当React的子元素内容发生改变时,并不会引起整个浏览器的重绘和重排,只会更改变化的数据部分,并且在给JSX添加事件监听时,使用on*EnentType的方式
• 并且这种事件的监听,它只作用于原生HTML元素上,若放在自定义的组件上时,是不起作用的,具体解决办法,可以引入第三方styled-components模块的,后续单独拿一篇幅来说也不为过的,涉及到的知识还是挺多的

7. react 中state

React设计这个setState函数是非常高效的,结合了函数式编程,不用考虑性能的问题

• 通过在React中封装的事件,例如:onChange,onClick,onKeyDown,onFocus,onBlur等这些事件类型里面绑定事件方法内的setState都是异步的

有时候,this.props和this.state可能会异步更新,在调用setState之后,并不会立马更新组件

其实它是会批量延迟更新

也就是props,state的值并不会立马的映射更新,它是把这个state对象放到一个更新队列里面,然后从队列当中把新的状态提出来合并到state中,最后在触发render函数组件的更新,从而导致UI界面的改变

你不能依赖它来更新下一个状态

• 对于SetState什么时候同步什么时候异步?如果是React控制的事件处理程序以及在它的钩子(生命周期)函数内调用setState,它不会同步的更新state
• 也就是说:React控制之外的事件调用setState是同步更新的,例如原生js绑定的事件,setTimeout/setInterval等,当然在React中绝大多数都是异步处理的
• 以上通过setTimeout/setInterval等addEventListener,以js的事件绑定方式内调用setState方法,此时,state的值将是同步更新的

如果要追究setState内部执行过程,其实它是很复杂的,包括了更新state,以及各个生命周期函数,以后有时间单独在详聊的

在这里,你只需要只知道,对于在React中的JSX绑定的事件处理函数中调用setState方法是异步的就可以了

如果你需要基于当前的state来计算出新的值,那么setState函数就应该传递一个函数,而不是一个对象,它可以确保每次调用的都是使用最新的state,这一点正是取决于是否传对象和函数的区别

多个setState调用会合并处理

下面的这些就不是状态(state),不应该定义成state,如何判定该用props还是state,可以进行自我的”灵魂拷问“

• 该数据是否由父组件(外部世界)通过props传递给子组件而来的?如果是,那么它就不是state
• 通过state或者props可以计算出的数据:比如一个数组的长度等,那么它就不是state
• 它是否随着时间的变化而保持不变?如果不改变,那么它也不应该是state:例如:某些页面固定的标题,字段
• 与props重复的数据,除非这个数据后期是需要做变更的

而针对这种无状态的组件(UI组件/函数式组件)

可以用纯粹的函数来定义,所谓纯函数,只有输入和输出,无状态,无生命周期钩子函数,只是用作于接收父组件传来的props值渲染生成DOM结构,无交互,无逻辑层的数据展示

无状态(函数式)组件,在性能上是最高效的,开销很低,因为没有那些生命周期函数嘛

就是一普普通通的函数,执行效率是很高的

setState 一定要注意的点

在这里,你只需要只知道,对于在React中的JSX绑定的事件处理函数中调用setState方法是异步的就可以了

如果你需要基于当前的state来计算出新的值,那么setState函数就应该传递一个函数,而不是一个对象,它可以确保每次调用的都是使用最新的state,这一点正是取决于是否传对象和函数的区别

** 传递一个函数可以在访问的时候，当前的state的值。因为setState的调用是异步的,this.state.以及this.props不会立即更新,它会被放置到一个队列中延迟合并处理

this.setState((prevState, newProps) => ({
     isStatus: !prevState.isStatus
  }));

  this.setState({
    desc: "学习React",
  });