本文共 4476 字，大约阅读时间需要 14 分钟。
学习视频源自：
UP 主：Java基基 机构：尚硅谷
文章目录
一、相关浅析
1.1 React
React：用于构建用户界面的 JavaScript 库
Rreact 高效的原因：虚拟 DOM；DOM Diff 算法，最小化页面重绘（更新元素）
在虚拟DOM上做修改，然后虚拟DOM再去操作真实DOM1.2 babel
Babel：是一个 JavaScript 编译器
babel：把 ES6 转成 ES5，方便使用 ES6 进行开发
二、简单上手
2.1 引入文件
相关 js 库：
- react.js：react 的核心库
- react-dom.js：react 扩展库，操作 DOM
- babel.min.js：解析 JSX 语法代码转为纯 JS 语法代码的库（浏览器不能直接识别 JSX）（JSX：JS 的扩展语法，全称 JavaScript XML，使用 JSX 语法时，标签名任意、属性名任意–可以自定义）
2.2 简单测试
- render()：渲染虚拟DOM到真实DOM，
render(virtualDOM, containerDOM)，即render(虚拟DOM, 真实DOM)
代码：
// 注意类型是 babel，不是 javascript，因为要使用 JSX 语法
效果图：看标签结构
-
createElement()：
例子：createElement(标签名, { 属性: 属性名 }, 内容)createElement('h2', { 'id': 'myID' }, 'Hello') -
toLowerCase()：转换成纯小写
-
toUpperCase()：转换成纯大写
2.3 JS 语法和 JSX 语法比较
从下图可以看出，使用 JSX 语法可读性更强，书写更方便
JSX语法中，使用 {} 代替 ""
2.4 在Google添加扩展程序：react developer tool
略
2.5 运行性能
直接运行会很慢，所以在真实项目中一般先编译后运行
三、JSX 练习
3.1 效果图
实现动态展示数据 li 列表
3.2 代码
重点：如何根据数据数组，写出对应的标签数组–map() 方法（在React中这将很常用）
备注：key 属性类似于 Vue 中 for 循环里面的 :key
3.3 感受
老师说，React 写起来，页面代码比较乱，嗯……这话不假，HTML 和 JS 混在一起（JS代码使用 { } 包裹），确实不是很分明
老师也说，要适应，哈哈哈……
四、React 面向组件编程
面向对象->面向模块->面向组件
4.1 React 组件的基本定义和使用
两种方式：工厂函数组件、类组件，函数组件方式比类组件方式效率高，因为类组件需要创建对象
工厂函数组件（简单组件）：没有状态的组件 类组件（复杂组件）：含有状态的组件 所以，如果需要添加状态方式一、工厂函数组件（简单组件）
注意：（1）工厂函数必须有 return；（2）工厂函数返回值为虚拟DOM
方式二、ES6 类组件（复杂组件）
备注：React 是对象，Component 是该对象的一个属性
4.2 组件三大属性
props、refs、state
打印this： 
4.2.1 state
（1）基础
state：值是对象类型。通过更新组件的 state 来更新对应的页面显示（重新渲染组件）
// this 是当前组件对象// 1.初始化状态：值为对象类型constructor(props) { super(props) this.state = { stateProp1: value1, stateProp2: value2 }}// 2.读取某个状态值：通过对象的key获取valueconst statePropertyName = this.state.statePropertyName// 获取state对象的statePropertyName属性// const { statePropertyName } = this.state//ES6写法// 3.更新状态--组件界面更新：参数是对象类型this.setState({ stateProp1: value1, stateProp2: value2}) 注意：更新状态需要使用 setState（因为直接修改state，组件并不会重新触发render()）
// 直接修改state，组件并不会重新触发render()this.state.comment = 'Hello';// 错误// 正确的修改方式是使用setState()this.setState({ comment: 'Hello'});// 正确 （2）小案例：交互
监听点击事件更新DOM（通过更新状态值实现）（状态值相当于标记flag）
注意：
- 在render（React.components中的方法）中，this为当前组件类的对象；
- 在自定义的方法中，this不是当前组件类，而是默认为undefined
解决方法：将自定义方法中的this强制绑定为组件对象
- 方式一：在
constructor中，写this.handleClick = this.handleClick.bind(this)（通过 bind 方法产生一个新的函数，该函数的函数体体和实际操作的handleClick的 函数体一模一样） - 方式二：在
render中，写return <h2 onClick="this.handleClick.bind(this)">
推荐使用方式一（只执行一次bind），因为方式二不是很高效（每次监听触发都会重新执行一次bind）
解构赋值：{ }（ES6语法）
const { isLikeMe } = this.state 等价于 const isLikeMe = this.state.isLikeMe 4.2.2 props
4.2.2.1 基础
- 读取属性值：
this.props.propertyName（其中，propertyName为自定义的属性名，this.props为固定代码） - 属性值类型限制和必要性限制：MyComponent.
propTypes= { type1:React.propTypes.string.isRequired, type2:React.propTypes.number}（红色部分之外为自定义部分） 注意：React.PropTypes自v15.5已经弃用，使用prop-types库代替，写法如下： MyComponent.propTypes= { type1:propTypes.string.isRequired, type2:propTypes.number}（红色部分之外为自定义部分） - 扩展属性：将对象的所有属性通过 props 传递
- 设置属性默认值：MyComponent.
defaultProps= { prop1: ‘props1默认值’, prop2: ‘props2默认值’ }（红色部分之外为自定义部分） - 组件类的构造函数
4.2.2.2 小案例（一）
自定义组件，实现人员信息显示
要求：（1）如果性别没有指定，默认为男；（2）如果年龄没有指定，默认为18
工厂函数方式实现： 4.2.2.3 小案例（二）：指定属性值的类型和必要性
- defaultProps：设置默认值
- propTypes：设置必要性限制
需要引入 prop-types.js
代码：
备注：age=“18”，此时18是字符串；age={ 18 }，此时18是数字
效果图：
4.2.2.4 小案例–补充：扩展运算符
...：扩展运算符，可以使用在对象或者数组上
4.2.2.5 小案例–类组件方式–不知道对不对
4.2.3 refs
refs：标识组件内元素（相当于document.getElementById，获取DOM元素）
4.2.3.1 小案例
要求：自定义组件，并完成以下功能
- 点击按钮，提示第一个输入框的值
- 第二个输入框失去焦点，提示输入值
4.2.3.2 代码说明1：event.target.value
所有的事件回调函数都有一个形参 event
event.target.value() 获取当前文本框的值（由事件触发时：回车、点击等） 4.2.3.3 代码说明2：通过 ref 获取DOM元素
官方不建议：
showInputFirst() { // 官方不建议 const input = this.refs.inputOne alert(input.value)}render() { return( // 官方不建议 )} 官方建议：
showInputFirst() { // 官方建议 alert(this.input.value)}render() { return( // 官方建议 { this.input = input } } /> )} 分析：input => { this.input = input }
当前标签元素 => { this.自定义命名 = 当前标签元素 } 意思：当前标签元素 => { 将当前标签元素写入组件对象中 }
4.2.4 state 和 props 的区别
详细可参考该博文：
4.3 解决 this 问题的两种方法
- 强制绑定：bind(this)
- 箭头函数
omponentDidMount() { this.intervalID = setInterval(function() { let { opcity} = this.state opcity -= 0.1 if(opcity<=0) { opcity = 1 } this.setState({ opcity}) }.bind(this),200) // 绑定this为当前react实例} omponentDidMount() { // 使用箭头函数解决this问题 setInterval(()=>{ this.setState({ date: new Date()}) }, 1000)} 转载地址：https://blog.csdn.net/qq_41956139/article/details/105263131 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
