2024年最新对于React你必须要知道的基础知识(1)，2024年最新2024京东最新前端面试真题解析

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。

上述版本仅用于开发环境，不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用：

React.development.js

• React.development.js 提供 React.development.js 核心功能代码，如：虚拟 dom，组件

• React.createElement(type,props,children);

let h1 = React.createElement(

“h1”,

null,

“这里是h1标签的子级，可以是标签，也可以是内容，不写就是空标签”

);

react-dom.production.js

• ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染

• ReactDOM.render(element, container, callback)

• element：要渲染的内容

• container：要渲染的内容存放容器

• callback：渲染后的回调函数

ReactDOM.render(

“这是第一个参数的内容”,

document.querySelector(“#app”),

()=>{

console.log(“渲染成功”)

}

);

为什么要使用 crossorigin 属性?

如果你通过 CDN 的方式引入 React，建议使用crossorigin

同时建议你验证使用的 CDN 是否设置了 Access-Control-Allow-Origin: * HTTP 请求头

这样能在 React 16 及以上的版本中有更好的错误处理体验。

babel

babel-standalone.js：在浏览器中处理 JSX

下载地址：https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

引入完成后要在script中加入type属性

使用JSX优化创建视图

插值表达式

let str = “这是str，应该是用来演示插值表达式的！！！”

ReactDOM.render(

{str}

这是用JSX来渲染的

,

document.querySelector(“#app”),

()=>{

console.log(“渲染成功”)

}

);

浏览器反馈

• 各种数据的插值状态(备注：插值只能执行表达式，不能执行语句)

• number——正常输出

• true / false——不输出

• undefined——不输出

• null——不输出

• 数组——去掉逗号后渲染在页面

• 对象——需要调用属性名，不然会报错

条件输出

因为我们插值不支持语句，所以在做条件输出时只能支持一下三种方式

1. 三目运算符——类似于if…else

2. 逻辑或 || ——类似于取反的 if()

3. 逻辑与 && ——类似于正常的 if()

ReactDOM.render(

{true ? "成立" : "不成立"}

{false || '这是用JSX来渲染的'}

{true && "正确"}

,

document.querySelector(“#app”),

()=>{

console.log(“渲染成功”)

}

);

列表输出

列表输出分为两种方式

1. 提出ReactDOM里的element并写成函数

let data = [

“内容1”,

“内容2”,

“内容3”,

“内容4”

]

function toData(){

let arr = [];

data.forEach(item=>{

arr.push(

• {item}
• )

  });

  最后

  面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

  

  

  来，在这里预祝各位成功拿下自己心仪的offer。
  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-0FJB1tni-1715750611796)]

  [外链图片转存中…(img-8BAOVOgJ-1715750611797)]

  [外链图片转存中…(img-diCy8g5b-1715750611797)]

  [外链图片转存中…(img-PItERCkS-1715750611798)]