React 的基本认识
一.官网文档
1）英文官网:https://reactjs.org/
2) 中文官网:https://doc.react-china.org/
2.描述
1) 用于构建用户界面的 JavaScript 库(只关注于 View)
2) 由 Facebook 开源
3. React的特点
1) Declarative(声明式编码)
2) Component-Based(组件化编码)
3) LearnOnce,WriteAnywhere(支持客户端与服务器渲染)
4) 高效
5) 单向数据流
4. React高效的原因
1) 虚拟(virtual)DOM, 不总是直接操作 DOM
2) DOMDiff 算法, 最小化页面重绘
二.react基本语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="test"></div> /*核心库*/ <script type='text/javascript' src='./js/react.development.js'></script>
/*提供操作DOM的react扩展库*/
<script type='text/javascript' src='./js/react-dom.development.js'></script>
//解析 JSX 语法代码转为纯 JS 语法代码的库
<script type='text/javascript' src='./js/babel.min.js'></script> <script type='text/babel'>/*告诉babel.js解析里面的jsx的代码*/ // 1.创建虚拟DOM元素对象 const vDom = <h1>Hello React!</h1> // 不是字符串 不要加引号 // 2.将虚拟DOM渲染到页面真实DOM容器中 ReactDOM.render(vDom,document.getElementById('test')) </script> </body> </html>
1. JSX
1) 全称: JavaScriptXML
2) react 定义的一种类似于 XML 的 JS 扩展语法:XML+JS
3) 作用: 用来创建 react 虚拟 DOM(元素)对象
a. varele=<h1>HelloJSX!</h1>
b.注意1: 它不是字符串, 也不是 HTML/XML 标签
c.注意 2: 它最终产生的就是一个 JS 对象
4) 标签名任意:HTML 标签或其它标签
5) 标签属性任意:HTML 标签属性或其它
6) 基本语法规则
a. 遇到 <开头的代码, 以标签的语法解析:html 同名标签转换为 html 同名元素, 其它
标签需要特别解析
b. 遇到以 { 开头的代码，以 JS 语法解析: 标签中的 js 代码必须用{}包含
7) babel.js 的作用
a. 浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行
b. 只要用了 JSX，都要加上 type="text/babel", 声明需要 babel 来处理
2. 模块与组件和模块化与组件化的理解
模块
1) 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
2) 为什么: js 代码更多更复杂
3) 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率
组件
1) 理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
2) 为什么: 一个界面的功能更复杂
3) 作用: 复用编码, 简化项目编码, 提高运行效率
模块化
当应用的 js 都以模块来编写的, 这个应用就是一个模块化的应用
组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
1.react组件
定义组件有两种方式：工厂函数组件和ES6类组件
函数式组件和类组件的区别和使用：
函数式比较简单，一般用于静态没有交互事件内容的组件页面。
类组件，一般又称为动态组件，那么一般会有交互或者数据修改的操作
函数组件能实现的功能，类组件一定可以实现，类组件能实现的功能，函数组件不一定可以实现。
1) 组件名必须首字母大写
2) 虚拟 DOM 元素只能有一个根元素
3) 虚拟 DOM 元素必须有结束标签
render()渲染组件标签的基本流程
1) React 内部会创建组件实例对象
2) 得到包含的虚拟 DOM 并解析为真实 DOM
3) 插入到指定的页面元素内部
1.组件的三大属性
state
1) state 是组件对象最重要的属性, 值是对象(可以包含多个数据)
2) 组件被称为"状态机", 通过更新组件的 state 来更新对应的页面显示(重新渲染组件)
props
1) 每个组件对象都会有 props(properties 的简写)属性
2) 组件标签的所有属性都保存在 props 中
ref(refs 与事件处理)
1) 组件内的标签都可以定义 ref 属性来标识自己
a. <inputtype="text"ref={input=>this.msgInput=input}/>
b. 回调函数在组件初始化渲染完或卸载时自动调用
2) 在组件中可以通过 this.msgInput 来得到对应的真实 DOM 元素
3) 作用: 通过 ref 获取组件内容特定标签对象, 进行读取其相关数据
事件处理
1) 通过 onXxx 属性指定组件的事件处理函数(注意大小写)
a. React 使用的是自定义(合成)事件, 而不是使用的原生 DOM 事件
b. React 中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2) 通过 event.target 得到发生事件的 DOM 元素对象 <inputonFocus={this.handleClick}/> handleFocus(event){ event.target // 返 回 input 对 象 }
2.组件的通信两种方式
props pubsub订阅和发布
3.react生命周期
4.react路由 （两种路由跳转，路由嵌套）
react-router
5.react-ui
6.react-redux(Hook)
7.react ajax请求（axios）