React 入门第二天：深入理解React的核心概念

不知火_caleb
104 阅读4分钟

在经历了第一天的初步探索之后，今天我决定深入了解React的一些核心概念和最佳实践。这将帮助我更好地理解React的设计理念，并为后续开发奠定坚实的基础。以下是我第二天学习的几个重点内容。

1. JSX的本质

**JSX（JavaScript XML）**是React中的一种语法扩展，它允许我们在JavaScript中编写类似HTML的代码。虽然JSX看起来像是模板语言，但实际上它完全是JavaScript。在理解了这一点后，JSX的使用会变得更加自然。

  • JSX背后的原理： JSX并不是原生支持的语法，而是被Babel等编译器转换成React.createElement()函数调用。以下是一个简单的转换示例：

    const element = <h1>Hello, world!</h1>;

    编译后会被转换为：

    const element = React.createElement('h1', null, 'Hello, world!');

    理解了这一点，可以更好地理解JSX中的各种表达式，比如条件渲染、列表渲染等。

  • JSX中的表达式： 在JSX中，你可以在大括号 {} 中嵌入任何有效的JavaScript表达式，比如：

    const user = { firstName: 'John', lastName: 'Doe' };
const element = <h1>Hello, {user.firstName} {user.lastName}!</h1>;

    这一点与Vue的模板语法中的双大括号 {{ }} 有些类似，但在React中，你可以使用更为丰富的JavaScript表达式。

2. 组件的深入理解

在React中，一切皆为组件。组件可以是函数式的或类式的。虽然React推荐使用函数式组件，但理解类组件对掌握React的历史和设计理念非常重要。

  • 函数式组件 vs 类组件：

    • 函数式组件：这些组件更为简洁，没有状态和生命周期方法。自从React引入Hooks后，函数式组件变得非常强大，可以处理几乎所有的场景。

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

    • 类组件：这些组件曾经是处理状态和生命周期的主要方式。虽然现在推荐使用函数式组件，但了解类组件有助于理解React的演进。

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

  • Props 和 State的区别：

    • Props：代表从父组件传递到子组件的数据。它们是只读的，不能在子组件中被修改。
    • State：组件内部的状态，通常通过useState或类组件中的this.state来管理。状态的变化会触发组件的重新渲染。

    理解这两者的区别和联系，是掌握React开发的关键。

3. React的生命周期（重点：useEffect）

在Vue中，我们有各种生命周期钩子，比如created、mounted、updated等。在React中，生命周期的概念更多地体现在类组件中，但在函数式组件中，useEffect Hook承担了类似的角色。

  • 类组件的生命周期： 类组件提供了一系列生命周期方法，如componentDidMount、componentDidUpdate和componentWillUnmount。这些方法可以在组件的不同阶段执行特定逻辑。

  • useEffect Hook： 函数组件中没有明确的生命周期方法，但我们可以通过useEffect来模拟这些行为。useEffect不仅可以用来替代componentDidMount和componentDidUpdate，还可以通过返回一个清理函数来模拟componentWillUnmount。

    useEffect(() => {
  // 在组件挂载时执行的逻辑
  console.log('Component mounted');
  
  // 返回的函数会在组件卸载时执行
  return () => {
    console.log('Component will unmount');
  };
}, []);

    通过依赖数组的设置（即useEffect的第二个参数），你可以控制useEffect的执行时机，这一点非常类似于Vue的watch功能。

4. 条件渲染和列表渲染

React中，条件渲染和列表渲染是非常常见的操作，理解它们的实现有助于编写灵活和可复用的组件。

  • 条件渲染： React中的条件渲染与JavaScript中的条件语句非常类似，你可以使用if-else、三元运算符或者逻辑与运算符来实现。

    const isLoggedIn = true;
return (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
  </div>
);

  • 列表渲染： 通过map()方法，你可以轻松地在React中渲染列表。与Vue类似，每个列表项都需要一个唯一的key来帮助React识别哪些元素发生了变化。

    const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);
return (
  <ul>{listItems}</ul>
);

5. 小结与展望

经过第二天的学习，我对React的核心概念有了更深入的理解。JSX虽然起初看起来有些陌生，但深入理解后发现它不仅强大而且灵活。组件的设计理念、Props和State的分离，以及React生命周期的管理，让我开始感受到React独特的魅力。

接下来，我计划继续深入研究React的高级特性，如useContext、useReducer等Hook，了解如何在复杂应用中管理状态和逻辑。希望这些学习经验能帮助你更好地理解React，也欢迎大家和我一起交流学习心得！

avatar
文章
阅读
粉丝