在入门React前必须掌握的基础用法

2024-01-10 10:15:15

使用组件组织用户界面

React是一个基于组件的框架，这意味着你可以将用户界面分解为更小的、可重用的组件。每个组件都有自己的状态和行为，并且可以独立于其他组件进行开发和测试。

例如，你可以创建一个<Header>组件，包含网站的头部导航栏，然后在不同的页面中使用这个组件。

function Header() {
  return (
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  );
}

2. 使用状态来管理组件数据

组件的状态是组件内部的数据，它可以随着时间的推移而变化。状态可以用于存储用户输入、表单数据、API响应等。

你可以使用useState钩子来创建和更新组件的状态。

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

3. 使用道具来传递数据

道具是组件之间传递数据的机制。父组件可以将数据作为道具传递给子组件，子组件可以使用这些道具来渲染其用户界面。

function ParentComponent() {
  const name = "John Doe";

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <ChildComponent name={name} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div>
      <p>My name is {props.name}.</p>
    </div>
  );
}

4. 使用事件处理程序来响应用户交互

事件处理程序是组件响应用户交互的方式。当用户单击按钮、移动鼠标或键入文本时，你可以使用事件处理程序来做出响应。

function MyComponent() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

5. 使用样式来美化你的用户界面

你可以使用CSS来样式化你的React应用程序。你可以将样式表链接到你的应用程序，或者你可以使用内联样式。

const styles = {
  header: {
    backgroundColor: "#f1f1f1",
    padding: "10px",
    fontSize: "20px",
  },
  content: {
    padding: "20px",
  },
};

function MyComponent() {
  return (
    <div>
      <h1 style={styles.header}>Hello, world!</h1>
      <div style={styles.content}>
        <p>This is my React application.</p>
      </div>
    </div>
  );
}