React 元素
- 1.createElement 的返回值 element 可以代表一个div
- 2.但element 并不是真正的div（DOM 对象）
- 3.所以我们一般称 element 为虛拟 DOM对象(代替div ）
()=>React 元素
- 1.返回 element 的函数，也可以代表一个div
- 2.这个函数可以多次执行，每次得到最新的虛拟 div
- 3.React 会对比两个虚拟div，找出不同，局部更新视图
找不同的算法叫做 DOM Diff 算法
小结-1
React & ReactDOM
CDN方式：react.js. react-dom.js. babeljs
也可以直接 import React from 'react'
React.createElement
创建虚拟 DOM 对象
函数的作用：多次创建虚拟 DOM对象
DOM Diff是找不同的算法
JSX
将XML转译为 React.createElement
，使用{}插入 JS代码
create-react-app默认将JS当作 JSX 处理
条件判断、循环要用原生 JS实现
组件&&元素
默认组件都会是大写的
组件：将其他物件组合起来的物件就是组件
就目前而言 一个返回react元素的函数就是一个组件
React两种组件
函数组件
类组件
PS:<welcome />注意你不是在写标签
标签会被翻译为 React.createElement
本质上就是把XML语法转换为JSReact.createElement语法逻辑
注意传入一个类需要注意的格式
class Welcome extends React.Component{
constructor(){
super()
this.state = {n:0}
}
render(){
return<div>hi</div>
}
}
添加props（外部数据）
类组件可以直接读取属性 this.props.xx
函数组件直接读取参数props.xxx
react会自动把读取的内容变为对象存在参数里
添加state（内部数据）
类组件用this.state读 this.setState来写(注意他是异步更新）
函数组件用useState返回数组 第一项读第二项写 一般参数叫做[n , setN]
注意：
类组件里的set state会等一下再改变n（异步）
函数组件中的setN永远不会改变n
在react中最好时遵循数据不可变原则
两种zengzeng不一样的变成模型
- 1.vue编程模型 一个对象对应一个DOM模型 当我们在编程过程中将对象的属性进行修改 那么这个对象的DOM节点将会全部更新 那么在ul中会立即显示
- 2.React编程模型不同对象对应不同DOM模型 在对象属性发送改变时 我们一般不会改变属性值 而是新建一个对象 然后赋予相同的属性名并改变它的值 那么react会自动对对比两个虚拟的DOM 找出不同 再局部更新DOM显示在ul
复杂state
面对复杂state
类组件的setState会自动合并到第一层的属性
也就是会保留没有被修改的那一部分的数值
但不会合并第二层属性也就是一个对象中的属性
函数组件更是压根都不帮你保留
解决方式
如果在其中进行事件绑定解决方式：
在每次修改的后面都加上...操作符或者
意思是将this.state.user里的属性拷贝到{}里
这里addN箭头函数不用加this
引用的时候记得前面要加this
一般函数在class里面都是被写在prototype里面 时所有的这个对象的共有属性 也就是在原型上面的属性
而class中的箭头函数时对象本身的属性 这就意味着 每个Son组件都有自己的箭头函数 相当于写在了 constructor里面
React 和 Vue的相同点和不同点
相同点
- 1.都是对视图的封装，React时用类和函数表示一个组件，而Vue是通过构造选项构造一个组件
- 2.都提供了createElement的XML简写，React提供的JSX语法（一般属性放在标签里，其他属性可以用花括号括起来） 而Vue是提供的是模板写法（template）
不同点
- 1.React是把HTML放在JS里写 而Vue是把JS放在HTML里写
实例 一个简单的demo 实现click 加一
类组件
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
constructor(){
super()
this.state = {
n: 1
};
}
add(){
this.setState({ n: this.state.n + 1});
}
render(){
return (
<div className="App">
n:{this.state.n}
<button onClick={() => this.add()}>+1</button>
</div>
);
}
}
函数组件
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [n, setState] = React.useState(0)
return (
<div className="App">
state: {n}
<button onClick = {()=> setState(n+1)} >+1</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
