一：本地模式的react
1·1：基本环境的搭建
-
react.js文件是创建React元素和组件的核心文件
-
react-dom.js文件用来把React组件渲染为DOM，此文件依赖于react.js文件，需在其后被引入。
-
Babel的主要用途是将ES6转成ES5 同时可以把JSX 语法转换新标准的JavaScript代码让现今浏览器兼容的代码
使用npm 进行下载：npm install --save react react-dom babel-standalone
下载好的文件在node_modules目录里
react目录—>react/umd/react.development.js"
react-dom目录—>react-dom/umd/react-dom.development.js
babel目录—>babel-standalone/babel.js
1·2:react的基本概念
React 是一个用于构建用户界面的 javascript 库。
1·3：虚拟Dom
1·3·1：什么是虚拟Dom
【快速减少更新次数 最小化更新区域】
每当数据变化时，React都首先重新构建整个DOM树（减少页面更新次数），然后React将当前整个DOM树和上一次的DOM树进行对比(DOM Diff算法-最小化页面重绘)，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。
1·3·2：为啥虚拟Dom可以提高性能呢
虚拟dom相当于在js和真实dom中间加了一个缓存
基于React进行开发时所有的DOM构造都是通过虚拟DOM进行
利用dom diff 算法避免了没有必要的dom操作，从而提高性能【diff算法计算出虚拟DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。】
1·3·3：react中的diff算法
就是将虚拟dom树转换成真实dom树的最少操作过程叫做调和，而调和是diff算法的具体表现
1·4：react的特点
- 声明式设计
- 高效->React通过对DOM的模拟，最大限度地减少与DOM的交互
- 灵活−>React可以与已知的库或框架很好地配合
- 组件->把页面的功能拆分成小模块–每个小模块就是组件
- 单行数据流->数据主要从父节点传递到子节点（通过props）。
二：react的jsx
2·1：什么是jsx
Javascript和XML结合的一种格式，是JavaScript 的语法扩展，在 React 中使用 JSX 来描述用户界面，
当遇到 <，JSX就当HTML解析，遇到 { 就当JavaScript解析。
【是一种非常严格的语法】
2·2：jsx的优点
- jsx 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
2·3：jsx在使用的时候需要注意
-
坑一：多行标签
【多行标签必须有一个父节点包裹起来，使用圆括号将整体抱起来】
let el=( <div> <h1>你好么么哒1</h1> <h1>你好么么哒2</h1> <h1>你好么么哒3</h1> </div> ) -
坑二：标签必须闭合
【 Jsx中的HTML标签必须按照w3c规范来写】
let el=( <div> <h1>你好</h1> </div> ) -
坑三:jsx中的注释
【｛/* 最外层有花括号*/｝】
let el=( <div> {/*我是一个注释*/} <h1>我是测试jsx的注释</h1> </div> )
2·4：jsx中的模板语法：
可以任意地在JSX当中使用 各种各样的JavaScript表达式，在JSX 当中的表达式要包含在大括号里
2·4·1：变量：
(1)：基本数据变量的插入
<!-- 等会react插入的dom节点 -->
<div id="demodiv">
</div>
<!-- 注意：在react的本地模式中如果要写
script标签上必须必须要加一个type属性="text/babel"
-->
<script type="text/babel">
let text="我是一个变量";
let num=666;
function fun(){
return 1+1
}
//数组的遍历
let arr=[
<h1>数组1</h1>,
<h1>数组2</h1>,
<h1>数组3</h1>,
<h1>数组4</h1>
]
let el=(
<div>
<h1>jsx的模板语法</h1>
<h1>变量：{text}</h1>
<h1>各种运算符：{num-6}</h1>
<h1>复杂运算符: {false?'真的':"假的"}</h1>
<h1>更复杂的 ：{fun()}</h1>
<h1>渲染数组:{arr}</h1>
</div>
)
// 开始渲染
ReactDOM.render(el,document.getElementById("demodiv"))
(2)：属性变量的插入
react中属性插入变量(动态属性)是不要双引号 直接用{}
<div id="demodiv"></div>
<script type="text/babel">
let text="点我去百度";
let url="http://www.baidu.com";
let el=(
<div>
<a href={url}>{text}</a>
</div>
)
ReactDOM.render(el,document.getElementById("demodiv"))
</script>
2·4·2:jsx的样式修改
(1):行内样式
- 定义样式对象, 以style属性引用一个对象
- 样式名要是驼峰命名法
- 默认像素单位px
<div id="demodiv"></div>
<script type="text/babel">
let el=(
<div>
<h1>行内样式</h1>
//第一个{}是jsx解析js 第二个{}是js对象的写法
<p style={{color:'red',backgroundColor:"yellow"}}>使用行内样式设置我的颜色</p>
</div>
)
ReactDOM.render(el,document.getElementById("demodiv"))
</script>
(2)：引用外部样式
- 引用外部样式时, 不要使用class作为属性名, 因为class是js的保留关键字
- 所以 React DOM 使用 className（小驼峰命名）来定义属性的名称
<style>
.con{
background-color: greenyellow;
color: honeydew;
}
</style>
<body>
<div id="demodiv"></div>
<script type="text/babel">
let el=(
<div>
{/*类样式采用对象的方式进行样式修改*/}
<h2 className="con">神奇</h2>
</div>
)
ReactDOM.render(el,document.getElementById("demodiv"))
</script>
</body>
2·4·3:jsx的扩展小知识
- html的value属性要写成：defaultValue
- html的checked属性要写成：defaultChecked
- style 里面写对象
- class 写className
三：遍历数组
在react中数组的遍历使用最多的也就是map（）
方式一：map()
let arr = ["xixixixix", "hahhahaha", "dededededed", "gagagagag"]
function fun() {
return arr.map((v, i) => {
return <li keys={i}>{v}</li>
})
}
let el = (
<div>
<ul>{fun()}</ul>
</div>
)
ReactDOM.render(el, document.getElementById("demondiv"))
方式二：for循环
let arr = ["xixixixix", "hahhahaha", "dededededed", "gagagagag"]
function fun2(){
let newarr=[]
for(let i=0;i<arr.length;i++){
newarr.push(
<li keys={i}>{arr[i]}</li>
)
}
return newarr
}
let el = (
<div>
<ul className="con">{fun2()}</ul>
</div>
)
ReactDOM.render(el, document.getElementById("demondiv"))
方式三：for in循环
let arr = ["xixixixix", "hahhahaha", "dededededed", "gagagagag"]
function fun3(){
let newarr=[]
for(let i in arr){
newarr.push(
<li keys={i}>{arr[i]}</li>
)
}
return newarr
}
let el = (
<div>
<ul className="con">{fun3()}</ul>
</div>
)
ReactDOM.render(el, document.getElementById("demondiv"))
方式四：forEach（）
let arr = ["xixixixix", "hahhahaha", "dededededed", "gagagagag"]
function fun4() {
let newarr=[]
arr.forEach((v, i) => {
newarr.push(
<li keys={v}>{v}</li>
)
})
return newarr
}
let el = (
<div>
<ul className="con">{fun4()}</ul>
</div>
)
ReactDOM.render(el, document.getElementById("demondiv"))
3·2：key关键字的作用
Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此要给数组中的每一个元素赋予一个确定的标识
一个元素key最好是这个元素在列表中拥有的一个独一无二的字符串
四：遍历对象
4·1：对象的取值有两种方法
- 打点
- 中括号：如果key是变量的话就要使用[]
4·2:Object的方法
object.keys()返回一个数组类型 ，值是方法中对象的键（key）
Object.values()返回一个数组类型， 值是方法中对象的值（value）
Object.entries()返回一个数组类型 ，值是方法中对象的键和值
<script>
let obj={
name:"xixi",
age:18,
sex:"男"
}
console.log(Object.keys(obj))
console.log(Object.values(obj))
console.log(Object.entries(obj))
</script>
4·3：对象的遍历
<div id="demondiv">
</div>
<script type="text/babel">
let obj = {
name: "lidaren",
age: 20,
sex: "男"
}
function fun() {
let item=Object.values(obj)
let newarr=[]
for(let i=0;i<item.length;i++){
newarr.push(
<li keys={i}>{item[i]}</li>
)
}
return newarr
}
let el = (
<div>
<h2>{fun()}</h2>
</div>
)
ReactDOM.render(el, document.getElementById("demondiv"))
let newarr=[]
for(let i=0;i<item.length;i++){
newarr.push(
<li keys={i}>{item[i]}</li>
)
}
return newarr
}
let el = (
<div>
<h2>{fun()}</h2>
</div>
)
ReactDOM.render(el, document.getElementById("demondiv"))
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
