react基础
1. react 基础
1.1 本地引入或CDN引入react的三个js文件
注意：必须先导入react.js再导入react-dom.js
babel.js支持原生jsx语法，作用：把jsx转化为js语法，才能被浏览器识别渲染出视图
<script src="./react/react.js">script>
<script src="./react/react-dom.js">script>
<script src="./react/babel.js">script>
1.2 定义react数据 渲染根标签，相当于vue的el
<div id="myAPP">div>
1.3 在script标签中实现react的模板、数据和逻辑
使用 type=“text/babel” 把script中的js环境切换为jsx环境，因为babel支持原生jsx语法
- 而vue的模板是在根标签中，数据和逻辑在js中
1.4 使用react内置API ReactDOM.render() 把模板和数据渲染到视图上
ReactDOM.render() 有两个参数：
- 第一个参数：需要渲染的模板和数据
- 第二个参数：模板数据渲染的位置（根标签）
两个参数中间记得加 逗号
ReactDOM.render(
// 第一个参数：需要渲染的模板和数据
这是react模板信息-{zhangsan.name}-{add(4,5)}
, // jsx语法会把标签解析为一个对象，不会报错
// 第二个参数：模板数据渲染的位置（根标签）
document.getElementById("myAPP")
)
2. JSX语法
React 使用 JSX 来替代常规的 JavaScript。 JSX: js + html
- 在传统网页渲染时，通过DOM原生操作查找html标签并设置，js 和 html 是分离状态
- 而 jsx 中 html 和 js 是一体不分离的，js可以嵌套html，html中可以嵌套js
JSX有以下优点：
1, JSX 发布后执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2, 它是类型安全的，在编译过程中就能发现错误。
3, 使用 JSX 编写模板更加简单快速。
2.1在jsx中使用html
原理 : 原生html标签在jsx中会被渲染成react中的元素对象
var a = 百度一下
console.log(a);
在jsx中可以直接写标签，所有标签都会被识别为react元素对象，最后通过 ReactDOM.render() 把标签内容渲染到视图上。
- 渲染出的是一个对象，属于react元素，类型为a标签
- 其中props原型是一个对象，包含 href属性 和 children内容
2.2在jsx中使用js
语法: 在html中通过{}渲染js逻辑
- 在jsx标签结构中嵌入js，使用{}执行js逻辑
- 不能直接写在jsx中，要放在标签内部
var div1 = {3+4} - {a} - {new Date().toLocaleString()} - {[1,2,3,4]};
可以在{}中进行数字、标签、函数、数组的渲染，但不能渲染js对象
var div2 = {{age: 20}} // {}不能渲染js对象,会报错
2.3标签绑定动态属性
属性值直接使用{} ，外层不加""
var div3 = 红色文字;
可直接在html的style中设置样式：
<style>
#div3{
color: red;
}
style>
2.4 特殊属性:class和for
特殊属性class和for的绑定：jsx中使用的 html属性class 和 js中的类关键字class 重名了，那么标签绑定特殊属性时要换一种属性名
- class—>className
- for—>htmlFor
var label4 = ;
2.5 input属性绑定
value属性 需要和 change事件 一起使用，双向绑定 否则报错
var input5 = {}}/>;
如果不需要双向绑定，只需要展示value，不需要更新，请使用 defaultValue
var input6 =
2.6 style属性绑定
在模板中 style值 要求必须是 对象
错误写法：var div7 =
正确写法：
- jsx中建议使用内联样式, 在标签中通过style属性绑定样式对象
- 也可以使用双层大括号 { {} }，第一层大括号表示 绑定样式对象，第二层大括号表示 设置的样式style值是对象结构
var myStyle = {color: "blue"}
var div7 =
style属性值要求是样式对象
style属性值要求是样式对象
2.7 注释
- 注释1：在标签结构外写注释，和js一样：单行// 多行/* */
var div8 =
style属性值要求是样式对象
{/* 注释2：在标签结构内的注释要写到{/* * /}中 */}
{/*style属性值要求是样式对象*/}
- 注释2：在标签结构内的注释要写到 *{/ * /}**中
2.8 判断
<1 使用 if/else 判断实现条件渲染
var obj = {age: 10, sex: true, friend:{name: "李四"} }
if(obj.sex){ var div9 = 性别: 男 }
else{ var div9 = 性别: 女 }
<2 使用 三目运算 实现条件渲染
var div9 = 性别: {obj.sex ? "男" : "女"}
如果数据是动态请求的数据，且数据结构超过了两次，那么在数据请求下来之前渲染就会报错，因此要加上条件，有两种方式如下所示：
- 三目运算
var div10 = {obj.feiend ? obj.friend.name : ""}
- &&(与运算)
var div10 = {obj.feiend && obj.friend.name}
❤️ 使用 a && b 赋值
如果a有值，就赋值b，如果a没值，就赋值undefined
&&的另一种写法：
var obj = {age: 10, sex: true, friend:{name: "李四"} }
var temp = obj.friend && obj.friend.name;
console.log(temp);
2.9 循环
由于react中没有v-if,v-for等指令, 所以不能使用for循环, 使用{}直接循环数组, 会把数组中的数据全部拿出并拼起来放入父标签
<1 标签内可以直接渲染数组，但会把数组的数据拼接到一起渲染
var arr1 = ['a', 'b', 'c', 'd'];
var ul1 = - {arr1}
<2 在react中循环展示的标签元素，必须要加唯一的key属性值，否则报错
var arr2 = [
a ,
b ,
c ,
d
]
var ul2 = {arr2}
❤️ arr1是请求下来的纯数据数组，arr2是react模板渲染需要的标签数组，现在需要做到是：把arr1数组结构转成arr2数组结构
var arr3 = arr1.map(item=>{
return {item}
})
var ul3 = {arr3}
<4 大部分情况下，我们会把map映射直接写到标签中
- map本身也是一种循环
var ul4 = {
arr1.map(item=>{
return - {item}
})
}
2.10 如果一个标签结构比较复杂，建议在根标签外层添加()
var div11 = (
{/* jsx中不支持单标签，需要在单标签后加/ */}
1
2
3
- a
- b
- c
- d
)
重点: 将模板或数据渲染到视图上
ReactDOM.render(
{a} {div1} {div3} {label4} {input5} {input6} {div7} {div8} {div9} {div10} {ul1} {ul2} {ul3} {ul4} {div11}
,
document.getElementById('example')
)
react注意事项：
1, 引入react的三个文件时, 注意react.js文件要在react-dom.js之前引入
2, react代码要写在script标签中, 且script标签的type类型为 text/babel
3,jsx中不支持单标签写法, html中的单标签必须写成双标签, jsx中双标签有两种写法**
**或者
4,如果标签有多层嵌套结构, 建议在根标签外层加()
5,标签的自定义属性建议添加data-前缀
6,react中没有像vue中的v-bind等指令, 动态属性的绑定也是用{}
3. react渲染更新
3.1 定义react渲染的模板
在模板中可以绑定事件函数和变量
var tem =
-
原生用on绑定事件，属性名用小写，如：onclick
-
而react使用on绑定事件，属性名要用小驼峰，如：onClick，并且函数名放在{}中
3.2 定义变量和函数
var count = 0;
function add(){
count ++;
// 由于count是普通变量，不是响应式数据，所以count更新，但视图不会更新
console.log(count, this);
// this.setState({})
}
- react非组件作用域中this（默认）指向的是undefiend
- 在react组件中，使用
this.setState更新数据，视图会自动更新
3.3 渲染组件模板
在React.render()中渲染组件模板，此处未使用组件，则只渲染模板tem
ReactDOM.render(
{tem},
document.getElementById('example')
)
解释：在渲染模板后发现count数据更新了，但视图并没有更新，原因是count是普通变量，不是响应式数据，所以count更新了视图没有更新。
注意：模板提前定义只会初始化一次count值，即使重新在render()函数中调用，也不会更新，因此需要在定义的add()函数中重新添加一次模板并调用render()函数
ReactDOM.render(
{tem}
{/* 在render()函数中写的模板，每次调用render函数都会更新数据 */}
,
document.getElementById('example')
)
- 在render()函数中写的模板，每次调用render函数都会更新数据
解释：第一个按钮的值一直为0，是因为提前定义的tem模板只会初始化一次count值，即使重新在render()函数中调用，也不会更新；第二个按钮每次点击后会更新，是因为当在render()函数中写模板时，每次调用render函数都会更新数据(更新视图)。
- 不使用组件的情况下，只有执行了React.render()才会渲染视图
- 但是不建议频繁调用render函数，因为React.render会重绘整个DOM，语法复杂且性能消耗大，因此建议使用组件
4. react组件渲染更新
4.1 设置一个react组件
react组件本身是一个es6的类，这个{}不是对象结构也不是函数体结构，而是类结构
class MyCom extends React.Component{
state = { // state中定义响应式数据
count: 0
}
add = ()=>{ // 自定义函数
this.setState({
count: this.state.count + 1
})
}
// render是组件的渲染函数，当组件初始化或state更新时调用
render(){
return
}
}
-
使用class设置组件类MyCom，继承react的组件库React.Component
-
在state中定义响应式数据 count
-
设置自定义函数为add，将add函数设置为箭头函数，在箭头函数中使用this.setState({}) 更新数据，使每次点击时数据count加一。具体写法：
count: this.state.count + 1 -
render是组件的渲染函数，当组件初始化或state更新时调用。调用render函数，返回值为react渲染的模板：button按钮，模板绑定点击事件的函数不是add了，而是this.add，数据渲染绑定也由count变为this.state.count
4.2 渲染组件更新视图
在ReactDOM.render()中渲染组件
ReactDOM.render(
5. 用户代码片段(react)：
{
"myReact": {
"scope": "html",
"prefix": "myreact",
"body": [
"<script src='react/react.js'>script>",
"<script src='react/react-dom.js'>script>",
"<script src='react/babel.js'>script>",
"<div id='example'>div>",
"<script type='text/babel'>",
"\tReactDOM.render(",
"\t\t,",
"\t\tdocument.getElementById('example')",
"\t)",
"script>"
],
"description": "这是自定义的react模板"
}
}