React&JSX使用

2024-10-03 18:32:52

在 React 开发中，除了 JSX 的基础使用，还有一些常见的注意事项和 JSX 的进阶用法。以下是需要重点注意的 React 开发技巧和
JSX 的更高级用法：

1. React 中的组件

React 的核心是组件。每个组件就是一个独立的、可复用的 UI 单元。React 组件可以通过 函数组件 或 类组件 来定义。

1.1 函数组件

这是 React 推荐的写法，简洁易读。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

1.2 类组件

在早期版本中，类组件被广泛使用，不过现在更多使用函数组件结合 Hooks。但类组件在某些旧代码中依然可见。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2. Hooks 和函数组件

在使用函数组件时，React 提供了 Hooks 来管理状态和副作用。以下是两个最常用的 Hook：

2.1 useState

useState 是用于声明状态的 Hook。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

2.2 useEffect

useEffect 是用于处理副作用的 Hook，比如数据获取、订阅事件等。它相当于类组件的生命周期方法 componentDidMount、componentDidUpdate 和 componentWillUnmount。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 类似于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 只有 count 改变时才会重新执行 effect

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

3. 组件间通信

在 React 中，父组件可以通过 props 向子组件传递数据，而子组件则可以通过 回调函数 将数据传递回父组件。

3.1 父组件传递数据给子组件

function Parent() {
  const message = "Hello from Parent!";
  return <Child msg={message} />;
}

function Child(props) {
  return <h1>{props.msg}</h1>;
}

3.2 子组件传递数据给父组件

通过传递一个回调函数，子组件可以将数据回传给父组件。

function Parent() {
  const handleChildData = (data) => {
    console.log('Data from child:', data);
  };

  return <Child sendData={handleChildData} />;
}

function Child(props) {
  const sendDataToParent = () => {
    props.sendData('Hello from Child!');
  };

  return <button onClick={sendDataToParent}>Send Data</button>;
}

4. 注意 key 属性的重要性

在 React 渲染列表时，key 属性非常重要。React 使用 key 来判断哪些元素发生了变化，从而提高渲染性能。如果没有唯一的 key，React 会发出警告，并且可能导致渲染错误。

const list = ['apple', 'banana', 'cherry'];
return (
  <ul>
    {list.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

最佳实践：不要使用索引作为 key，如果数据发生变化，可能会导致渲染问题。应使用唯一的 ID 或其他能唯一标识元素的值。

5. 状态提升

当多个组件需要共享某个状态时，可以将状态提升到它们最近的共同父组件。这是 React 中常见的状态管理模式。

function Parent() {
  const [sharedValue, setSharedValue] = useState('');

  return (
    <div>
      <ChildA value={sharedValue} onChange={setSharedValue} />
      <ChildB value={sharedValue} />
    </div>
  );
}

function ChildA(props) {
  return <input value={props.value} onChange={(e) => props.onChange(e.target.value)} />;
}

function ChildB(props) {
  return <p>Shared value: {props.value}</p>;
}

6. JSX 中的条件渲染进阶

6.1 多条件渲染

可以使用 switch 或 if-else 在渲染复杂逻辑时控制多个条件。

function renderElement(status) {
  switch (status) {
    case 'loading':
      return <p>Loading...</p>;
    case 'success':
      return <p>Data loaded successfully!</p>;
    case 'error':
      return <p>Error loading data</p>;
    default:
      return null;
  }
}

6.2 短路运算符渲染（?? 和 ||）

使用 ?? 来提供默认值：

const userName = user?.name ?? 'Guest';
return <h1>Welcome, {userName}</h1>;

7. JSX 的 children 属性

children 是 React 组件的一个特殊属性，用于表示嵌套在组件内部的 JSX。

function Wrapper(props) {
  return <div className="wrapper">{props.children}</div>;
}

function App() {
  return (
    <Wrapper>
      <h1>Title</h1>
      <p>This is some content</p>
    </Wrapper>
  );
}

8. React 中的表单处理

React 中表单元素的 value 和 onChange 需要绑定到状态，从而实现受控组件。

function Form() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

9. JSX 中的 spread 运算符

有时候组件需要接收一组动态属性，React 支持使用 spread 语法 (...) 来将对象属性传递给组件。

const props = {
  className: 'my-class',
  id: 'unique-id'
};

return <div {...props}>Content</div>;

10. JSX 中的表达式

JSX 中不能直接使用语句（比如 if 或 for），只能使用表达式。常见的解决方案包括使用三元运算符、数组 map()、以及在外部处理逻辑后再渲染。

// 使用表达式
const isAdmin = true;
return <p>{isAdmin ? 'Admin Panel' : 'User Dashboard'}</p>;

// 外部处理
let element;
if (isAdmin) {
  element = <AdminPanel />;
} else {
  element = <UserDashboard />;
}
return <div>{element}</div>;

11. JSX 中的注释

在 JSX 中，注释需要使用 {/* ... */} 语法：

return (
  <div>
    {/* 这是一个注释 */}
    <h1>Hello World</h1>
  </div>
);

12. JSX 小结

JSX 是 JavaScript 的扩展，允许编写类似 HTML 的代码。
必须用一个父元素包裹返回的 JSX。
使用大括号 {} 包含 JavaScript 表达式，可以在 JSX 中使用任意合法的表达式。
注意 key 属性的重要性，它是优化 React 渲染性能的关键。

React 强调组件化设计，并且通过 Hooks 和 JSX 提供了简洁而强大的开发体验。希望这些进阶技巧和注意事项能帮助你更好地掌握 React 开发。

码农公寓