2024年前端最新react基础入门(1)，面试进阶100题网盘

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

如果想传递数据给子组件，可通过props方式：

（1）在引用组件的标签处通过 props属性名={属性值} 的方式来设置传入的props

（2）在子组件入参处通过解构的方式获取props

示例：

function MyApp() {
 // 传递给MyLabel组件两个props，info和height
  return (
    <MyLabel
      info={{ name: '张三', id: '123' }}
      height={100}
    />
  );
}

// MyLabel组件，可以获取传入的props
function MyLabel({info, height}) {
    // ... ...
}

4，了解JSX语法

概念：JSX（JavaScript XML）首先被应用在react中，他是一种javaScript语法的扩展，比较类似于模板语言。他最终产生的是js对象，既不是字符串（不要加引号）也不是html/xml标签。

作用：用来简化创建虚拟DOM，使代码更简洁，更容易维护。

需要注意的规则：

• 标签首字母小写，则会被转换成html的同名元素，如果html没有这个元素，就报错
• 标签首字母大写，则react就会渲染对应的组件，如果没有定义该组件，就报错
• 标签属性没有引号，通常使用大扩号{}，表示大括号内可以使用js表达式

（eg：const myId = “123”; <h1 id={myId}>Hello,）

• 内联样式style={{key:value}}有两个大括号，第一个括号表示里面是一个js表达式，第二个括号表示里面是一个键值对（eg：<span style={{color:‘#e0e0e0’, fontSize:18}}>内容）
• 虚拟DOM只能有一个根标签
• 属性使用小驼峰形式写法（eg：font-size写成fontSize）
• 必须闭合标签
• 与js的对象不同，js对象放在不同的地方创建是不同的引用，并不恒等于。但是只要JSX的返回值一样，就是相等。

参考：JSX基本语法规则

HTML转换JSX的辅助工具：HTML to JSX

5，条件渲染

在React使用的JSX语法中，同样支持与js相同的条件渲染if else、三目运算? :、&&语法等。

其中&&运算符的使用及其注意事项：

&&运算符作用是：左侧为true时，渲染右侧JSX，否则不渲染。

其中左侧不能是数字，只能是布尔值。例如假设count为数字，表达式要写count > 0 && 而不能写count &&

6，列表渲染

在React使用的JSX语法中，列表渲染通常是使用map方法遍历和filter方法过滤。

map()方法使用注意：

直接放在 map() 方法里的 JSX 元素一般都需要指定全局唯一的key值。目的为了让react能够精准定位到每个元素，同时其后续发生了变化可以高效准确的更新DOM树。
所以不要设置index索引，不要设置random随机数，因为随机数会导致每次重新渲染都会重新创建DOM。

7，更新界面useState和HOOK

useState使用：

（1）引入useState：import { useState } from ‘react’;

（2）自定义state变量和set方法：const [sth, setSth] = useState(initialValue)

（3）使用：通过sth直接取值，通过setSth(value)更新值

HOOK理解：

以useXXX开头的函数被称为HOOK，React内置了很多的HOOK供用户使用，useState就是其中一种。其他的还有useContext（读取和订阅组件中的context）、useRef（帮助引用一个不需要渲染的值）等。具体可查看官方API

同时React支持自定义HOOK。

HOOK的调用说明：

HOOK的要求比较严格，必须在组件顶层调用，如果想在一个循环或者条件逻辑中调用，只能再抽一个子组件放在顶层调用。

8，ref的使用

作用：组件内的标签可以定义ref属性来标识自己；还可以引用一个值。

ref的应用：
（1）字符串（已废弃）：最早的用法。就是和vue的ref一样，使用ref在节点上定义后，通过this.refs[refName]来引用真实的dom节点。

<input ref="inputRef" /> // this.refs['inputRef']来访问

（2）回调形式的ref：就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果和字符串一致，获取当前节点的引用。

<input ref={(input)=>{this.inputValue = input}} type="text"/>

（3）通过React.createRef()方法：createRef()方法创建一个ref容器，将其赋值给一个变量。

class Child extends React.Component{
    constructor(props){
        super(props);
        this.myRef = React.createRef(); // 创建ref容器，并赋值给myRef
    }

    componentDidMount(){
        console.log(this.myRef.current);
    }

    render(){
        // dom的ref参数引用myRef的值
        return <input ref={this.myRef}/>
    }
}

（4）通过useRef HOOK引用值

导入useRef这个HOOK：import { useRef } from ‘react’;

初始化ref：const inputRef = useRef(0); // 默认初始值是0

使用引用的值：useRef返回一个{ current: 0 }对象，其中current就是要引用的值。

说明：

inputRef.current的引用值，存在react中，可以或取值和修改值，他并没有state严格，在他的值改变时react无法识别到，因此他发生变化不会触发UI重新渲染。

理解：

useRef的引用值方式也可以用来操作DOM，就是将节点放入初始化后的ref中，例如：

，然后可以通过inputRef.current来访问节点，例如inputRef.current.scrollIntoView();     inputRef.current.focus();

注意：

ref是一种脱围机制，即他跳脱出了React，尽量避免使用。

使用ref时尽量做一些非破坏性的操作（例如聚焦、滚动条、测量DOM元素），避免修改由React管理的DOM节点而出现问题。

9，开发者工具react-devtools

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！