React和ReactDOM核心对象

React与ReactDOM是react中核心对象，React为核心功能，ReactDOM提供对DOM的操作，以前的老版本中只有
React没有ReactDOM,新版本中分离出。

  1. //程序的入口文件index.js
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. //element表示元素或者节点，targetDOM表示目标节点
  5. ReactDOM.render(element,targetDOM)//用于将element(HTML片段)，插入指定的 DOM 节点。
  6. version18.0
  7. import React from 'react';
  8. import ReactDOM from 'react-dom/client';
  9. const root = ReactDOM.createRoot(targetDOM);
  10. root.render(element)//用于将element(HTML片段)，插入指定的 DOM 节点。

什么是JSX?

js文件中类似于HTML标签的部分就是一个JSX。

JSX是Facebook 团队提出的一个语法方案，可以在JavaScript的代码直接中使用 HTML 标签来编写 JavaScript 对象。其使用的是 XML-like 语法，这种语法方案需要通过babel来进行编译转换成真实可用的 JavaScript 代码

React 是基于组件的开发思想，React 认为一个组件可以是一个完全独立的没有任何其他依赖的模块文件。一个组件 中可以有自己的样式（Inline Style）和结构（JSX编写的HTML）

  • 面试题JSX和html一样吗，它们之间有什么关联？

    • jsx本质上是还是js，他也是我们常说的虚拟DOM,跟html完全是两码事
    • JSX是对html的映射

      jsx底层原理

      jsx底层通过React.createElment创建
      1. let a = <p>测试</p>
      2. let b = React.createElement('p',null,'测试');
      3. //a和b是完全等价的 a最终还是会通过babel转化成b的样子

  • vue中template中的html标签和JSX类似，底层也是通过Vue.createElement创建的虚拟DOM

  • 浏览器中的DOM，则通过document.createElement创建

    jsx表达式（jsx模板插值）

    在jsx我们可以利用jsx的插值语法，来插入动态的表达式，jsx中的插值语法非常简单，一对花括号即可{} 
    1. let name = '张三';
    2. //jsx
    3. <p>我叫： {name}</p>
    什么是表达式？一般我们认为凡是具有返回值的js语句就是一个表达式，例如一个函数或者一个变量。
    而像 if..else /switch等，则不是，以为他们没有返回值，他们是流程控制语句

    jsx使用注意事项

  1. 每个jsx对象最外层必须有个根标签

    1. const a = <div>
    2. <p>测试</p>
    3. </div>
    4. 或者
    5. const b = <>
    6. <p>测试</p>
    7. </>
    8. //推荐用后者，因为<>只是占位，不会真的生成一个标签

  2. 在jsx里面绑定事件注意要用驼峰命名 ,比如 <div onClick={this.clickTest}></div>

  3. 在jsx中添加类名的时候，注意要用className ,比如 <div className="test"></div>
  4. 添加行内样式的时候，style属性接受的是一个对象，比如 <div style={ {color:'red'} }>测试</div>

    在jsx中使用语句

    条件判断

    ```javascript //写法 一 const Component = () => { return n%2===0 ?
    n是偶数
    : n是奇数 //就像 js 一样可以使用判断 }

//写法 二 //如果需要外面的 div const Component = () => { return (

{ n%2===0 ?
n是偶数
: n是奇数 }
) }

//写法三

const Component = () => { const inner = n%2===0 ?

n偶数
:n奇数 const content = (
{ inner }
) return content }

//写法四 const Component = () => { const content = (

{ n%2===0 ?
n偶数
: n奇数 }
) return content }

//写法五 const Component = () => { let inner if (n%2===0) { inner =

n
} else { inner = n } const content = (
{ inner }
) return content }

  1. <a name="UVWQl"></a>
  2. ### 循环
  3. ```javascript
  4. //写法一
  5. const Component = (props) => {
  6. return props.numbers.map( (n,index)=>{ return <div> 下标:{index},值为:{n}</div> } )
  7. }
  9. //写法二
  10. //如果需要外面的 div
  11. const Component = (props) => {return 
  12.  (<div>{props.numbers.map((n,index)=>{ return <div> 下标:{index}值为:{n}</div>})}</div>)
  13. }
  15. //写法三
  16. const Component = (props) => {
  17. const array = []
  18. for(let i=0;i<props.numbers.length;i++){array.push(<div>下标{i}值{props.numbers[i]</div>)}
  19. return <div>{ array }</div>
  20. }

总结

  • 引入React和ReactDOM
    • CDN方式
      • react.js
      • react-dom.js
      • babel.js (jsx语法转换)
    • 直接import React from 'react'
  • React.createelement
    • 创建虚拟DOM对象
    • 函数的作用：多次创建虚拟DOM对象
    • DOM diff：对比不同的算法
  • jsx
    • 将XML转译为 React.createelement
    • 使用{}插入JS代码
    • 使用create- react-app默认将JS当作JSX处理
    • 条件判断、循环要用原生JS实现