写在前面,大家好!我是【跨考菌】,一枚跨界的程序猿,专注于后台技术的输出,目标成为
全栈攻城狮
!这博客是对我跨界过程的总结和思考。如果你也对Java
、后端技术
感兴趣,抑或是正在纠结于跨界,都可以关注我的动态,让我们一起学习,一起进步~
我的博客地址为:【跨考菌】的博客
目录
内容大纲,持续更新:
【React新手学习指南】01 React修炼入门(小白专属系列)
【React新手学习指南】02 React生命周期浅析(超详细小白也能看懂)
【React新手学习指南】03 React脚手架实操(适合新手)
【React新手学习指南】04 React中如何发送ajax请求?
【React新手学习指南】05 React组件通讯|监听原理总结
【React新手学习指南】06 小白也能看懂的React Router教程
【React新手学习指南】07 小白也能看懂的React Redux教程
如果你觉得对你有帮助的话,记得帮博主一键三连😊哦
1 React认识
1.1 React官网
- 英文官网: https://reactjs.org/
- 中文官网: https://doc.react-china.org/
1.2 React介绍
- 用于构建用户界面的 JavaScript 库(只关注于View)
- 由Facebook开源
1.3 React的特点
- Declarative(声明式编码)
- Component-Based(组件化编码)
- Learn Once, Write Anywhere(支持客户端与服务器渲染)
- 高效
- 单向数据流
1.4 React高效的原因
- 虚拟(virtual)DOM, 不总是直接操作DOM
- DOM Diff算法, 最小化页面重绘
2 React的基本用法
2.1 相关js库
- react.js: React的核心库
- react-dom.js: 提供操作DOM的react扩展库
- babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
2.2 页面中导入js
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
2.3 编码
<script type="text/babel"> //必须声明babel
// 创建虚拟DOM元素
const vDom = <h1>Hello React</h1> // 千万不要加引号
// 渲染虚拟DOM到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>
2.4 开发者调试工具
链接:https://pan.baidu.com/s/1WobUR3LL_3RezBmiSl1ORg 提取码:53jl
这是谷歌插件,打开chrome浏览器,打开chrome://extensions/,将上述文件拖动到chrome界面即可。
插件安装成功后可以看到在调试界面看到上图功能。
3 React JSX
3.1 效果图
3.2 虚拟DOM
- React提供了一些API来创建一种
特别
的一般js对象
a. var element = React.createElement(‘h1’, {id:‘myTitle’},‘hello’)
b. 上面创建的就是一个简单的虚拟DOM对象 - 虚拟DOM对象最终都会被React转换为真实的DOM
- 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
3.3 JSX
- 全称: JavaScript XML
- react定义的一种类似于XML的JS扩展语法: XML+JS
- 作用: 用来创建react虚拟DOM(元素)对象
a.var ele = <h1>Hello JSX!</h1>
b. 注意1: 它不是字符串, 也不是HTML/XML标签
c. 注意2: 它最终产生的就是一个JS对象 - 标签名任意: HTML标签或其它标签
- 标签属性任意: HTML标签属性或其它
- 基本语法规则
a. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b. 遇到以 { 开头的代码,以JS语法解析: 标签中的js代码必须用{ }包含 - babel.js的作用
a. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
b. 只要用了JSX,都要加上type=“text/babel”, 声明需要babel来处理
3.4 渲染虚拟DOM元素
- 语法: ReactDOM.render(virtualDOM, containerDOM)
- 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
- 参数说明
a. 参数一: 纯js或jsx创建的虚拟dom对象
b. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
3.5 创建虚拟DOM的2种方式
- 纯JS(一般不用)
React.createElement('h1', {id:'myTitle'}, title)
<script type="text/javascript">
// 1. 创建虚拟DOM
/*方式一: 纯JS(一般不用)创建虚拟DOM元素对象*/
const msg = 'I Like You!'
const myId = 'Atguigu'
const vDOM1 = React.createElement('h2', {id: myId}, msg.toUpperCase())
// 2. 渲染到真实页面
const domContainer = document.getElementById('test1')
// debugger
ReactDOM.render(vDOM1, domContainer)
</script>
- JSX:
<h1 id='myTitle'>{title}</h1>
<script type="text/babel">
// 1. 创建虚拟DOM
/*方式二: JSX创建虚拟DOM元素对象*/
const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
// debugger
// 2. 渲染到真实页面
ReactDOM.render(vDOM2, document.getElementById('test2'))
</script>
3.6 案例
实现图示效果:
<script type="text/babel">
/*
功能: 动态展示列表数据
*/
/*
技术点:
1). 使用JSX创建虚拟DOM
2). React能自动遍历显示数组中所有的元素
3). array.map()的使用
*/
// 数据的数组
var names = ['jquery', 'zeptoo', 'angular', 'react全家桶', 'vue全家桶']
// 数据的数组-->标签的数组
var lis = []
names.forEach((name, index) => lis.push(<li key={index}>{name}</li>))
// 创建虚拟DOM
const ul = <ul>{lis}</ul>
// 渲染虚拟DOM
ReactDOM.render(ul, document.getElementById('example1'))
const ul2 = <ul>{
names.map((name, index) => <li key={index}>{name}</li>)
}</ul>
ReactDOM.render(ul2, document.getElementById('example2'))
</script>
4 组件化思想
4.1 模块
- 理解: 向外提供特定功能的js程序, 一般就是一个js文件
- 为什么: js代码更多更复杂
- 作用: 复用js, 简化js的编写, 提高js运行效率
注:这个部分时拆分成多个部分来写的
4.2 组件
- 理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
- 为什么: 一个界面的功能更复杂
- 作用: 复用编码, 简化项目编码, 提高运行效率
4.3 模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
类似于这样的
4.4 案例
<script type="text/babel">
// 1. 定义组件
/*方式1: 工厂函数组件(简单组件)*/
function MyComponent () {
return <h2>工厂函数组件(简单组件)</h2>
}
/*方式2: ES6的类组件(复杂组件)*/
class MyComponent2 extends React.Component {
render () {
console.log(this) // MyComponent2的实例对象
return <h2>ES6类组件(复杂组件)</h2>
}
}
// 2. 渲染组件标签
ReactDOM.render(<MyComponent />, document.getElementById('example1'))
ReactDOM.render(<MyComponent2 />, document.getElementById('example2'))
</script>
如果对你有帮助,记得帮博主一键三连😊哦
下篇【React新手学习指南】02 React生命周期浅析(超详细小白也能看懂) 介绍了React生命周期相关核心内容。和【跨考菌】一起加油吧~