第 1 章 React入门
用于构建用户界面的JavaScript库是一个将数据渲染为HTML视图的开源JavaScript库。
1.1 React简介
1.1.1 是什么？
用于构建用户界面的JavaScript库
是一个将数据渲染为HTML视图的开源JavaScript库
1.1.2 谁开发的?
1.1.3 特点
- 原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）
- document.getElementById(‘app’)
- document.querySelectot(‘#app’)
- document.getElementByTagName(‘span’)
-
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
-
原生JavaScript没有组件化编码方案，代码复用率低
1.1.4 React的特点
-
采用组件化模式，声明式编码，提高开发效率及组件复用率
-
在React Native 中可以使用React 语法进行移动端开发
-
使用虚拟DOM + 优秀的Diffing算法，尽量减少与真实的DOM的交互
1.1.5 JS基础
- 判断this的指向
- class
- ES6语法规范
- npm包管理器
- 原型，原型链
- 数组常用方法
- 模块化
1.2 React的基本使用
1.2.1 效果
1.2.2 相关js库
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入Babel，用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
1.2.3 创建虚拟DOM的两种方式
- 使用jsx创建虚拟DOM
<body>
<!-- 容器 -->
<div id="test">
</div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入Babel，用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
<!-- 一定要写babel -->
<script type="text/babel">
/* 创建虚拟DOM */
const VDOM = <h1><span>hello , react</span></h1>
/* 渲染虚拟DOM到页面 */
ReactDOM.render(VDOM,document.querySelector('#test'))
</script>
</body>
- 使用js创建虚拟DOM
<body>
<!-- 容器 -->
<div id="test">
</div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<script type="text/javascript">
/* 创建虚拟DOM */
const VDOM = React.createElement('h1',{id:'test'},React.createElement('span',{},'hello react'))
/* 渲染虚拟DOM到页面 */
ReactDOM.render(VDOM,document.querySelector('#test'))
</script>
</body>
1.2.4 虚拟DOM与真实DOM
虚拟DOM：
真实DOM：
-
虚拟DOM
-
本质是Object类型的对象
-
虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
-
虚拟DOM最终会被React转化为真实DOM，呈现在页面上
-
1.3 React JSX
1.3.1 JSX
-
全称：JavaScript XML
-
react 定义的一种类似于 XML 的 JS 扩展语法: JS + XML 本质是
React.createElement(component, props, ...children)方法的语法糖 -
作用: 用来简化创建虚拟 DOM
-
写法：
let ele = <h1>Hello JSX!</h1 -
注意 1：它不是字符串, 也不是 HTML/XML
-
注意 2：它最终产生的就是一个 JS 对象
-
-
标签名任意: HTML 标签或其它标签
-
标签属性任意: HTML 标签属性或其它
-
基本语法规则
-
遇到** <开头的代码, 以标签的语法**解析: html 同名标签转换为 html 同名元素，其它标签需要特别解析
-
遇到以** { 开头的代码，以 JS 语法解析**: 标签中的** js 表达式必须用{ }包含 **
-
样式的类名指定：需要使用
className -
内联样式：要用
style = {{key : value}}的形式去写 -
虚拟DOM只有一个根标签
-
标签必须闭合
-
标签首字母
-
若小写字母开头，则将改标签转为html中同名元素，若html中无改标签的同名元素，则报错
-
若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
-
-
const VDOM = (
<div>
<h1 id={myId.toLowerCase()} className='title'>
<span style={{ color: 'white', fontSize: '50px' }}>{myData}</span>
</h1>
<h1 id={myId.toUpperCase()} className='title'>
<span style={{ color: 'white', fontSize: '50px' }}>{myData}</span>
</h1>
<input type="text" />
<good>123456</good>
<Good></Good>
</div>
)
-
babel.js 的作用
-
浏览器不能直接解析 JSX 代码, 需要** babel 转译为纯 JS 的代码**才能运行
-
只要用了 JSX，都要加上
type="text/babel", 声明需要 babel 来处理
-
1.3.2 JSX效果
<body>
<div class="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
const myId = 'niNo'
const myData = 'hello renxiaolan'
//1.创建虚拟DOM
const VDOM = (
<h1 id={myId} className='title'>
<span>{myData}</span>
</h1>
)
//2.渲染虚拟DOM
ReactDOM.render(VDOM,document.querySelector('.test'))
</script>
</body>
1.3.3 渲染虚拟DOM元素
语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将**虚拟 DOM 元素渲染到页面中的真实容器 DOM **中显示
参数说明
-
- 参数一: 纯 js 或 jsx 创建的虚拟 dom 对象
-
- 参数二: 用来包含虚拟 DOM 元素的真实 dom 元素对象(一般是一个 div)
1.3.4 JSX练习
//模拟一些数据
const data = ['Angular', 'React', 'Vue']
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
ReactDOM.render(VDOM, document.querySelector('#test'))
1.4 模块与组件、模块化与组件化的理解
1.4.1 模块
-
理解：向外提供特定功能的 js 程序, 一般就是一个 js 文件
-
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
-
作用：复用 js, 简化 js 的编写, 提高 js 运行效率
1.4.2 组件
-
理解：用来实现局部功能效果的代码和资源的集
-
为什么要用组件： 一个界面的功能更复杂
-
作用：复用编码, 简化项目编码, 提高运行效率
1.4.3 模块化
当应用的 js 都以模块来编写的, 这个应用就是一个模块化的应用
1.4.4 组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)