react学习

React快速上手：从零到项目实战-优快云博客 

前端面试题_2023大厂前端面试-优快云博客

技术栈对比

vue + vue-router + vuex + axios + elementui	react + react-router-dom + redux（Zustand）  + axios + antdesign

react
快速创建工程	官方脚手架 Create React App
JSX	JSX是一种JavaScript的扩展语法，允许在JavaScript代码中直接编写类似HTML的标记。JSX代码最终会被编译成普通的JavaScript代码 标签：JSX标签可以是HTML标签（如<div>、<p>）或自定义组件（如<MyComponent>）。 属性：属性使用花括号包裹，支持JavaScript表达式。例如：<img src={logo} alt="logo" />。 嵌入表达式：在JSX中可以嵌入JavaScript表达式，使用花括号包裹。例如：<h1>{title}</h1>。 条件渲染：使用逻辑运算符或三元运算符进行条件渲染。例如：{isLogged ? <User /> : <Guest />}。 列表渲染：使用map方法遍历数组，生成多个JSX元素。例如：{items.map(item => <li key={ item.id}>{ item.name}</li>}。
虚拟dom	是js对象，模拟真实的dom，diff算法去更新真正需要更新的dom。 性能优化：虚拟DOM的更新比真实DOM的更新成本低，因为虚拟DOM的比较和更新是在内存中进行的。 减少DOM操作：通过Diff算法，React可以找出最小的变化部分，减少不必要的DOM操作，提高性能。
redux和zustand的区别	都是状态管理器，zustand减少样板代码，不需要像 Redux 那样编写大量的 action creators 和 reducers。
函数组件和类组件的区别	1.复杂度：函数组件接受props，返回jsx，轻量；类组件继承自React.Component，比较重。 2.状态管理：函数组件通过hooks进行状态管理，类组件使用 this.state 进行状态管理。 3.生命周期函数：函数组件没有，类组件有componentDidMount, componentDidUpdate, componentWillUnmount 4.官方推荐函数组件，组合大于继承
useEffect	相当于vue组件的 mounted，例如组件初次加载执行 useEffect(() => { ajax请求获取数据 }, [])
入口文件	import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // 函数组件 直接运行以下函数 const App = () => { const title = 'Welcome to React'; const items = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ]; return ( <div> <h1>{title}</h1> <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }; // ======================================== const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);