03 2020 档案
摘要:组件间通信 5.1.1. 方式一: 通过props传递 1) 共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 2) 通过props可以传递一般数据和函数数据, 只能一层一层传递 3) 一般数据-->父组件传递数据给子组件-->子组件读取数据 4) 函数数据-->子组件传递数据给父
阅读全文
摘要:react ajax 前置说明1) React本身只关注于界面, 并不包含发送ajax请求的代码2) 前端应用需要通过ajax请求与后台进行交互(json数据)3) react应用中需要集成第三方ajax库(或自己封装) 常用的ajax请求库 1) jQuery: 比较重, 如果需要另外引入不建议使
阅读全文
摘要:使用create-react-app创建react应用 react脚手架 1) xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 a. 包含了所有需要的配置 b. 指定好了所有的依赖 c. 可以直接安装/编译/运行一个简单效果 2) react提供了一个用于创建react项目的脚手架
阅读全文
摘要:React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作 生命周期详述1) 组件的三个生命周期状态: * M
阅读全文
摘要:理解1) 问题: 在react应用中, 如何收集表单输入数据2) 包含表单的组件分类a. 受控组件: 表单项输入数据能自动收集成状态b. 非受控组件: 需要时才手动读取表单输入框中的数据 例子: <!DOCTYPE html> <html lang="en"> <head> <meta charse
阅读全文
摘要:组件的组合使用 步骤:1)拆分组件: 拆分界面,抽取组件2)实现静态组件: 使用组件实现静态页面效果3)实现动态组件 ① 动态显示初始化数据 ② 交互功能(从绑定事件监听开始) 问题:数据保存在哪个组件内?看数据是某个组件需要(给它),还是某些组件需要(给共同的父组件)问题:子组件需要改变父组件的状
阅读全文
摘要:React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => this.msgInput = input}/> b. 回调函数在组件初始化渲染完或卸载时自动调用 2) 在组件中可以通过thi
阅读全文
摘要:React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变化的数据2) 注意: 组件内部不要修改props数据 编码操作1) 内部读取某个属性值 this.p
阅读全文
摘要:React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数据)2) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 编码操作1) 初始化状态
阅读全文
摘要:React 模块与组件 几个重要概念理解 1). 模块与组件 1. 模块: 理解: 向外提供特定功能的js程序, 一般就是一个js文件 为什么: js代码更多更复杂 作用: 复用js, 简化js的编写, 提高js运行效率 2. 组件: 理解: 用来实现特定功能效果的代码集合(html/css/js)
阅读全文
摘要:React JSX React 使用 JSX 来替代常规的 JavaScript。 例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/r
阅读全文
摘要:1、React的基本认识 官网: 1) 英文官网: https://reactjs.org/ 2) 中文官网: https://doc.react-china.org/ 介绍描述: 1) 用于构建用户界面的 JavaScript 库(只关注于View) 2) 由Facebook开源 React 特点
阅读全文