React：基础知识学习

5. 数组遍历

5. 总结

---

1. JSX中添加属性时，使用 className 代替 class , 像label中的for属性，使用htmlFor代替；

2. JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹 ；

3. JSX语法中，标签必须成对出现，如果是单标签，则必须自闭合；

4. 在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可；

5. 在 JSX 中只能使用表达式，不能出现语句；

6. 在 JSX 中注释语法：{/* 中间是注释的内容 */}

四、组件

===============================================================

1. 基本概念

---

1. 组件

① 一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)

② 把这些局部功能组装到一起就形成了完整的一个大的功能

③ 主要目的在于: 复用代码, 提高项目运行效率

2. 组件化

如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用

3. 模块

多个组件形成模块, 或者是一个提供特定功能的js文件, 主要特点在于耦合性低, 可移植性高, 执行效率好

4. 模块化

如果一个应用都是用模块的形式来构建的，那么这个应用就是模块化应用

5. 对照现实生活，本地 和 本地化

2. 组件的概念

---

1. 虚拟DOM对象的集合

① 将一组虚拟DOM对象, 封装在一起

函数 + 类

② 就构成了一个组件

2. 组件内部, 可以处理

数据+业务逻辑

3. 组件的创建方式

---

1. 工厂函数

function Test() {

return

xxx

}

使用

① 无参数

functionPerson() {

return (

姓名: 小撩宝宝

)

}

ReactDOM.render(, document.getElementById(‘app’));

② 带参数

function Person(props) {

return (

姓名：{props.name}

年龄：{props.age}

爱好：{props.hobby}

)

}

let vDom = <Person name=“小撩” age={18} hobby={[“打篮球”, “打羽毛球”, “打乒乓球”]} icon=“img/xiaoliao.png”/>;

③ 多组件

function Header(props) {

return (

)

}

function Content(props) {

return (

我是内容部分

)

}

function Footer(props) {

return (

我是尾部

)

}

function Article(props) {

return (

)

}

ReactDOM.render(

, document.getElementById(‘app’));

2. ES6语法

class Test extends React.Component {

render() {

return

xxx

}

}

使用

class Person extends React.Component {

render(){

let style = {

backgroundColor: ‘red’,

width: 400,

height: 400

};

return (

姓名：{this.props.name}

年龄：{this.props.age}

爱好:

{this.props.hobby.map((item, index)=>(

• {item}
• ))}

  )

  }

  }

  let vDom = <Person name=“张三” age={18} hobby={[“篮球”, “乒乓球”, “羽毛球”]}/>;

  ReactDOM.render(vDom, document.getElementById(‘app’));

  

  

  3. ❌❌❌❌ES5老语法

  React.createClass({

  render() {

  }

  })

  4. 组件的注意

  ---

  1. 组件名称: 首字母必须大写! 只有大写才会被识别成组件

  2. 虚拟DOM 必须有且只有一个根元素

  5. 补充

  ---

  ReactDOM.render()的渲染流程

  1. 判定渲染的内容是否是组件(包含组件)→判断依据→首字母是否大写

  如果是组件

  2. 如果是组件

  ① 判断是工厂函数→获取它返回值→虚拟DOM对象

  ② 判断是组件类→调用其render()获取→虚拟DOM对象

  3. 将虚拟DOM对象，转换为真实DOM

  4. 插入到真实的DOM容器中

  五、向组件传值——props

  =========================================================================

  1. 组件内部, 通过props属性值来获取

  ---

  2. 意义

  ---

  当我们在使用某个组件时, 希望能够在外界控制组件内部的数据,此时, 就需要向组件传值。

  3. 方式

  ---

  1. 在书写组件标签时, 直接加自定义属性

  <组件 属性=“值”></组件>

  2. 在组件内部

  function Test(props) {

  return

  {props.属性}

  }

  class Test extends React.Component {

  render() {

  let value = this.props.属性

  return

  {value}

  }

  }

  4. 默认的props设置

  ---

  1. 通过组件类的 defaultProps 属性为 props 设置默认值

  2. 代码

  ① 工厂函数的默认props设置：

  

  ② 组件类的默认props设置：

  

  5. Props验证

  ---

  1. 意义

  ① Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用

  ② 当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

  2. 使用：React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库

  ① 导入

  ② 使用

  

  

  3. 补充：验证器选择

  4. React.PropTypes.array：React.PropTypes.arrayOf(React.PropTypes.number)

  5. React.PropTypes.bool

  6. React.PropTypes.func

  7. React.PropTypes.number

  8. React.PropTypes.object

  9. React.PropTypes.string

  10. React.PropTypes.oneOf([‘News’, ‘Photos’])

  11. React.PropTypes.oneOfType([

  React.PropTypes.string,

  React.PropTypes.number,

  React.PropTypes.instanceOf(Message)

  ])

  9. React.PropTypes.shape({

  color: React.PropTypes.string,

  fontSize: React.PropTypes.number

  })

  10. 不可空

  React.PropTypes.func.isRequired

  React.PropTypes.any.isRequired

  六、组件内的状态机-state

  ==========================================================================

  1. 什么是state?

  ---

  ① React 把组件看成是一个状态机（State Machines）, 通过状态 (State) 去操作状态机。

  ② 在开发中, 通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

  ③ 在React 中，只需更新组件的 state，然后根据新的 state 重新渲染用户界（不要操作 DOM）。

  2. 意义

  ---

  根据state状态来渲染界面，后期,只要我们修改state, 那么界面就会自动重新渲染：再次执行render

  3. 注意

  ---

  1. 不能直接修改state, 需要通过setState方法

  ① 此方法内部给出的对象, 会增量更新到原state

  ② 并不会替换原state

  2. 状态数据封装在组件内部, 不要在外界访问

  3. 多次state数据"同时修改", 会被合并后, 更新一次

  4. Demo: 更改界面内容

  ---

  1. 核心代码

  

  2. 运行结果

  

  3. 点击后效果

  

  5. Demo：props和state共用

  ---

  1. 核心代码

  

  2. 运行效果

  

  七、组件中的state和props区别

  ==============================================================================

  props用于外部向组件、组件之间数据传递

  state用于控制组件内部数据状态

  1. props

  ---

  1. props是指组件间传递的一种方式

  2. 组件内部的this.props属性是只读的不可修改

  

  2. state

  ---

  1. state是组件内部的状态(数据)

  2. 不能够直接修改，必须要通过setState来改变值的状态

  3. 案例演示

  ---

  八、组件的事件处理

  ====================================================================

  1. DOM 元素的事件处理

  on事件名称 = “执行函数(event)”

  激活

  2. react组件的事件处理

  1. React 事件绑定属性的命名采用驼峰式写法，而不是小写

  2. 如果使用 JSX 的语法你需要传入一个函数作为事件处理函数

  点击

  3. react组件的事件阻止

  1. 不能使用返回 false 的方式阻止默认行为

  2. 明确的使用 preventDefault

  

  4. 事件方法中的this

  1. 💛💛💛箭头函数中的this是在定义函数时绑定，且内部无this. 参照上下文确定this

  2. 普通函数是在执行函数时绑定, 内部有this, 谁执行就是谁

  5. 事件方法中传参

  可以使用箭头函数, 二次包装

  6. 渲染多个组件方法

  将多个组件放到同一个Div构成的虚拟DOM中，并直接渲染最终的虚拟DOM

  

  九、关于表单的联动处理

  ======================================================================

  1. 问题描述

  ---

  1. 表单字段内容的值, 使用state进行绑定

  2. 导致表单字段, 用户无法修改

  2. 原因

  ---

  值是获取的state中的数据, 数据不变, 界面不会被渲染

  3. 解决

  ---

  监听onChange事件

  1. 获取event.target.value

  2. 反向的设置到state, 控制数据变更

  

  十、ref的使用

  ===================================================================

  1. 定义

  ---

  Refs 提供了一种方式，用于访问在 render 方法中创建的 DOM 节点或 React 元素

  2. 使用场景

  ---

  1. 处理焦点、文本选择或媒体控制

  2. 触发强制动画

  3. 集成第三方 DOM 库

  3. 注意

  ---

  官方提示, 如果可以通过声明式实现，则尽量避免使用 refs。话外音: React无法控制局面的时候，就需要直接操作Refs了

  4. 案例使用

  ---

  1. 让输入框获得焦点?

  2. 核心代码

  

  十一、组件的嵌套组合

  =====================================================================

  1. 概念

  ---

  在一个组件内部, 可以直接嵌入另外一个组件，可以完全当做是一个html标签使用：本质不是

  2. 注意

  ---

  最终都会被babel进行转化, 转变为对应层级关系的虚拟DOM对象, 然后再渲染为真实DOM对象

  3. 案例实操1

  ---

  Demo: 完成对学生信息的展示/添加/删除?

  

  ① 步骤一

  1. 静态组件拆解, 核心代码

  2. 核心代码

  

  ② 步骤二

  1. 动态效果实现(添加/删除/显示), 核心代码如下

  2. 添加和删除部分

  ① 在父组件中定义增加和删除的方法，并传递给子组件

  ② 子组件中调用方法

  

  ③ 总结

  1. 多层组件中, 数据该放在何处?

  如果只用于一个组件, 则定义在该组件内容; 如果是运用于多个组件, 则定义在它们的父组件中

  2. 多层组件中, 数据传递问题?

  父组件通过props传递数据给子组件, 子组件不能直接修改父组件的数据, 必须是父组件定义修改数据的函数, 传递给子组件然后由子组件调用

  4. 案例实操2

  ---

  1. Demo: 受控方式实现-用户名和密码获取?

  2. 核心代码

  

  

  十二、React组件的生命周期

  ==========================================================================

  1. 前言

  ---

  1. 组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程

  2. 如果能够做到知其然且知其所以然, 那么在后期多组件、中大型项目开发过程中, 就能够很好的把控项目的性能细节

  2. 生命周期

  ---

  1. 图示

  

  2. 阶段划分

  ① 初始化阶段：在组件初始化阶段会执行

  图示

  

  ② 更新阶段：props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法

  图示

  

  ③ 卸载阶段：componentWillUnmount()

  ④ 错误处理：componentDidCatch()

  3. 完整的钩子选项运行流程图

  

  3. 组件运作流程

  ---

  1. 首次初始化渲染: React.render()

  

  2. 组件每次发生更新: state: this.setState({})

  

  3. 卸载阶段

  

  4. 案例实操

  ---

  1. Demo1: 组件生命周期钩子函数执行次数分析?

  2. Demo2: 年龄增长/删除组件

  3. 核心代码

  

  5. 辅助阅读——概念：生命周期函数详解

  ---

  1. constructor(props)

  ① react组件的构造函数, 在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。

  ② constructor中应当做些初始化的行为，如：初始化state，将事件处理函数绑定到类实例上，但不要使用setState()。如果没有必要初始化state或绑定方法，则不需要构造constructor，或者把这个组件换成纯函数写法。

  ③ 可以利用props初始化state，在之后修改state不会对props造成任何修改，但仍然建议提升状态到父组件中，或使用redux统一进行状态管理。

  ④ 官方建议不要在constructor引入任何具有副作用和订阅功能的代码，这些应当在componentDidMount()中写入。

  2. getDerivedStateFromProps(nextProps, prevState)

  ① getDerivedStateFromProps在组件实例化后，或者接受新的props后被调用。他返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。

  ② 如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。调用steState()不会触发getDerivedStateFromProps()。

  3. componentWillMount() / UNSAFE_componentWillMount()

  ① componentWillMount()将在react未来版本中被弃用; UNSAFE_componentWillMount()在组件挂载前被调用，在这个方法中调用setState()不会起作用，因为它在render()前被调用。

  ② 为了避免副作用和其他的订阅，官方建议使用componentDidMount()代替。这个方法也是用于在服务器渲染上的唯一方法。

  4. render()

  render()方法是必需的。当被调用时，将计算this.props和this.state，并返回以下一种类型：

  ① React元素, 通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。

  ② 字符串或数字, 他们将会以文本节点形式渲染到dom中。

  ③ Portals, react 16版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在DOM树的任何位置。

  ④ null, 什么也不渲染。

  ⑤ 布尔值, 也是什么都不渲染，通常后跟组件进行判断。

  ⑥ 当返回null,false,ReactDOM.findDOMNode(this)将会返回null，什么都不会渲染。

  注意: render()方法必须是一个纯函数，不能在里面改变state，也不能直接和浏览器进行交互，而是应该将事件放在其他生命周期函数中。 如果shouldComponentUpdate()返回false，render()不会被调用。

  5. componentWillReceiveProps()

  ① 官方建议使用getDerivedStateFromProps函数代替componentWillReceiveProps()。

  ② 当组件挂载后，接收到新的props后会被调用。如果需要更新state来响应props的更改，则可以进行this.props和nextProps的比较，并在此方法中使用this.setState()。如果父组件会让这个组件重新渲染，即使props没有改变，也会调用这个方法。

  ③ react不会在组件初始化props时调用这个方法, 调用this.setState也不会触发。

  6. shouldComponentUpdate(nextProps, nextState)

  ① 调用shouldComponentUpdate, 可以让react知道组件的输出是否受state和props的影响。默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为。在渲染新的props或state前，shouldComponentUpdate会被调用, 默认为true。这个方法不会在初始化时被调用，也不会在forceUpdate()时被调用。返回false不会阻止子组件在state更改时重新渲染。

  ② 如果shouldComponentUpdate()返回false，componentwillupdate,render和componentDidUpdate不会被调用。在未来版本，shouldComponentUpdate()将会作为一个提示而不是严格的指令，返回false仍然可能导致组件的重新渲染。官方并不建议在shouldComponentUpdate()中进行深度查询或使用JSON.stringify()，他效率非常低，并且损伤性能。

  7. UNSAFE_componentWillUpdate(nextProps, nextState)

  在渲染新的state或props时，UNSAFE_componentWillUpdate会被调用，将此作为在更新发生之前进行准备的机会。这个方法不会在初始化时被调用。不能在这里使用this.setState()，也不能做会触发视图更新的操作。如果需要更新state或props，调用getDerivedStateFromProps。

  8. getSnapshotBeforeUpdate()

  在react render()后的输出被渲染到DOM之前被调用。它让组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate()。

  9. componentDidUpdate(prevProps, prevState, snapshot)

  ① 调用shouldComponentUpdate, 可以让react知道组件的输出是否受state和props的影响。默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为。在渲染新的props或state前，shouldComponentUpdate会被调用, 默认为true。这个方法不会在初始化时被调用，也不会在forceUpdate()时被调用。返回false不会阻止子组件在state更改时重新渲染。

  ② 如果shouldComponentUpdate()返回false，componentwillupdate,render和componentDidUpdate不会被调用。在未来版本，shouldComponentUpdate()将会作为一个提示而不是严格的指令，返回false仍然可能导致组件的重新渲染。官方并不建议在shouldComponentUpdate()中进行深度查询或使用JSON.stringify()，他效率非常低，并且损伤性能。

  十三、虚拟DOM和Diff算法

  ==========================================================================

  1. 前言

  ---

  1. 虚拟DOM和diff算法是React中非常核心的两个概念, 我们需要对此有一个很全面的认知！

  2. 这对于我们用脚手架开发项目, 尤其是企业中前后端分离的项目(类似: 后台管理系统)等有很大的帮助!

  2. 虚拟DOM

  ---

  1. 内部执行流程

  ① 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中;

  ② 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异;

  ③ 把步骤2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

  2. 原理剖析

  ① Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，硬盘读取速度比较慢，我们会就在它们之间加缓存条;

  ② 反之, 既然 DOM 运行速度慢，那么我们就在JS 和 DOM 之间加个缓存。JS只操作Virtual DOM，最后的时候再把变更的结果写入DOM。

  3. diff算法

  ---

  1. 如果两棵树的根元素类型不同，React会销毁旧树，创建新树

  2. 对于类型相同的React DOM 元素，React会对比两者的属性是否相同，只更新不同的属性; 当处理完这个DOM节点，React就会递归处理子节点。

  3. 遍历插入元素, 如果没有key, React将改变每一个子删除重新创建; 为了解决这个问题，React提供了一个 key 属性。当子节点带有key属性，React会通过key来匹配原始树和后来的树。

  4. 执行过程

  ---

  1. 通过绑定key, React就知道带有key ‘1024’ 的元素是新的，对于 ‘1025’ 和 ‘1026’ 仅仅移动位置即可。

  2. key使用注意

  

  5. 九宫格算法案例

  ---

  1. 要求

  ① 要求: 按照九宫格算法的要求, 添加/删除盒子, 并且做好边界值处理。

  ② 考察知识点: 1. 虚拟DOM; 2. diff算法; 3. state管理。

  2. 核心代码
  3. 案例运行效果

  

  4. 素材

  ① 数据

  dataArr: [

  {“icon”: “f1”, “name”: “水果-番茄”},

  Vue

  • 什么是MVVM？

  • mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

  • 组件之间的传值？

  • Vue 双向绑定原理

  • 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

  • 虚拟 DOM 实现原理

  • Vue 中 key 值的作用？

  • Vue 的生命周期

  • Vue 组件间通信有哪些方式?

  • vue 中怎么重置 data?

  • 组件中写 name 选项有什么作用？

  • Vue 的 nextTick 的原理是什么？

  • Vuex 有哪几种属性?