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语法转换为JS

React.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);