JSX语法

react 核心语法

react-dom 把JSX视图进行编译渲染，渲染成为HTML页面「DOM节点 web-app」

react-native 把JSX视图进行编译渲染，渲染成为原生App「native-app」

所以React既可以做webAPP也可以做原生的App

Reac18的语法：

const root = ReactDOM.createRoot(document.getElementById('root'));  //创建一个根容器 #root
root.render(
// 把所有的内容进行编译，最后渲染到根容器中
  <>
    111
  </>
);

Reac16的语法：

ReactDOM.render(
<>
    111
</>,
document.getElementById('root')
)

JSX基础知识

jsx (js and xml(html) )

虽说也是js和html混合在一起，但是其不是字符串，也不是以字符串的方式插入到容器中 ，jsx是有一套自己的编译机制的

1. JSX视图中之允许出现一个根节点

我们可以使用<></>空文档标记标签，来保证唯一的根节点，而且还不增加层级结构处理它的原理:<React.Fragment></React.Fragment>

2. 基于"{}"胡子语法，嵌入JS表达式

+{ }大胡子 {{}} 小胡子（vue）

+ JS表达式：执行有结果的，例如

+ 值(或者是存储值的变量)

+ 原始值类型

都可以放进来，但是：true/false/null/undefined/Symbol类型/bigint
类型等原始值，渲染的结果都为空，只有数字和字符串可以渲染出来内容

+ 对于对象类型：

数组对象是可以渲染的，它会把数组中的每一项分别进行渲染：不是转换为字符串（每一项之间是没有逗号分隔），而是内部有一套自带的循环机制，会迭代数组每一项，进行渲染！
对于函数对象，基于胡子语法渲染是不可以的，但是我们可以把其作为一个组件进行渲染[除了绑定合成事件]

+ 给style设置行内样式的时候，可以允许胡子语法中嵌入对象

+ 可以嵌入JSX虚拟DOM对象

+ 剩下的对象不能嵌入

+ 数学/JS允许[函数执行也行，但是要看返回值]

+ 判断语句：只有三元运算符是JS表达式

+ 循环语句：一般使用数组中的迭代方法（只要是map）,原理就是基于数组的迭代方法，返回一个新的数组，React会把新的数组中的每一项分别进行渲染!!

+ ...

3. 给元素设置样式

+ 设置样式类名：className

+ 设置行内样式：style={{color:"red"}} 其值必须是一个基于胡子语法嵌入的对象

4. 如果是循环创建新的元素，需要给创建的元素创建唯一的key值

+ key必须是本次循环中的唯一值（作用是用于DOM-DIFF差异化对比）

+ 建议不要用索引作为key

5. ReactJSX语法有自己单独的事件绑定机制：合成事件绑定

合成事件绑定的方法，经过内部一些处理后，最后把绑定的方法单独作为普通函数执行，所以函数中的this情况，就按照这个标准来分析即可！

+ 普通函数：this->undefined

+ 箭头函数：上下文中this是谁，这里就是谁[还是undefined]

+ 可以基于原生JS中的this方法，预先处理this和传递的实参

/* 
    React中的合成事件：onXxx={方法}
*/
const Demo = function Demo() {
    const handle = function handle(ev) {
        //ev:合成事件对象(经过React内部处理过的对象) SyntheticBaseEvent
        //this:undefined[因为React内部做了处理，如果绑定的是普通函数，则函数中的this就是undefined]
        console.log(this);
    }

  // const handle = (ev) => {
    //     //ev:SyntheticBaseEvent
    //     //this:自己所处上下文中的this[还是undefined]
    // }
  
    return <div>
        <button onClick={handle}>按钮</button>
    </div>
}
export default Demo

处理this和传递的参数

const handle2 = function handle(x, y, ev) {
        // x:10 y:20 ev:SyntheticBaseEvent
        console.log(this, x, y, ev);
    }
    return <div>
        <button onClick={handle2.bind("AA", 10, 20)}>按钮</button>
    </div>