react学习

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的更新比真实DOM的更新成本低，因为虚拟DOM的比较和更新是在内存中进行的。
• 减少DOM操作：通过Diff算法，React可以找出最小的变化部分，减少不必要的DOM操作，提高性能。

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 />);