React：基础知识学习(2)

类

↓

模块

↓

组件

↓

…

模块化与组件化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

6. 调试工具

---

配置react-developer-tools开发调试工具插件

1. 下载React Developer Tools 4.6.0

2. 打开谷歌浏览器chrome://extensions/

3. 图示

三、JSX语法

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

1. 小demo: 你好，撩课学院

---

第一步： 引入js库

包含核心功能

包含dom操作

负责ES6语法降级和JSX语法解析

2. npm安装

第二步：react基本使用

1. 创建虚拟DOM

react高效的原因, 就是基于操作虚拟DOM这个前提

所谓的虚拟DOM, 讲白点就是一个拥有固定格式的JS对象而已

虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应

2. 渲染虚拟DOM, 到界面上

这个渲染的函数内部会做很多事

合并多次DOM对象的改变, 统一渲染

通过DOM Diff算法, 计算出变化的部分进行渲染

代码实现

3. 创建虚拟DOM的两种方式

① React.createElement 函数

React.createElement(

type,

[props],

[…children]

)

React.createElement(“button”, {onClick: ()=>{console.log(“点击了按钮”)}}, “这是按钮标签包裹的内容”)

② JSX

4. 渲染虚拟DOM到指定容器

ReactDOM.render(虚拟DOM对象, document.getElementById(“root”))

2. Demo1

---

往容器中插入一个span标签, class为: “it-like”, 内容为: “撩课学院”。 两种实现方式: a) 通过典型js方式; b) JSX方式?

总结

1. JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式

2. 更加语义化, 更加直观, 代码可读性更高

3. 性能相对原生方式更加好一些

① 使用远程CDN

② 本地下载

3. Demo2

---

典型JS插入方式与JSX插入方式的对比

4. Demo2

---

JSX常见的界面操作方式?

1. 多重标签嵌套

2. js中的变量, 表达式要写在{}内

注意：在虚拟DOM中，只能有一个出口，即最外层只能有一层标签，最外层不能多层标签并列。

3. 内联样式通过对象方式引入

4. 注释也需要用{}括起来

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

  最后

  除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

  • 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】