React基础
一.React 简介
1 .React 是什么？
一个用于构建用户界面的 JavaScript 库
中文手册：https://react.docschina.org/
2.官网
英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/
3.介绍描述
用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源
二.声明式
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
三.组件化
构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。
四.React的特点
1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）
五.React高效的原因
1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。
六.如何使用 React
基于浏览器的模式
- React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
- React.createElement(type,props,children);
- ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
- ReactDOM.render(element, container[, callback])
- element：要渲染的内容
- container：要渲染的内容存放容器
- callback：渲染后的回调函数
- ReactDOM.render(element, container[, callback])
七.React基本使用
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
第一种使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(
React.createElement("h1",null,"哈哈哈"),
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
</body>
</html>
第二种React创建视图
<script>
let h1 = React.createElement("h1",null,"我是一个标题")
let p = React.createElement("h1",null,"我是一个标签")
let el = React.createElement(
"header",
{
id:"header"},
h1,
p
)
ReactDOM.render(
el,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
八.babel
babel-standalone.js：在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js
最低0.47元/天 解锁文章
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
