【React 入门实战篇】从零开始搭建与理解React应用-三、React核心概念与基础语法

三、React核心概念与基础语法

3.1 JSX语法详解

JSX是React中的一个语法糖，它允许开发者在JavaScript代码中编写类似HTML的标记。这种语法使得开发者能够以一种声明式的方式描述界面，提高了代码的可读性和可维护性。

JSX的语法规则:

1. 元素创建：使用尖括号<>来创建元素，就像在HTML中一样。例如，<div>、<span>等。
2. 组件创建：组件名称以大写字母开头，表示这是一个React组件。例如，<MyComponent />。
3. 属性传递：属性（props）以名称-值对的形式出现，类似于HTML属性。属性值可以是字符串、数字、布尔值或数组等。
4. 文本插值：使用花括号{}将JavaScript表达式嵌入到JSX中。例如，{variable}或{expression()}。
5. 条件渲染：使用JavaScript表达式来决定是否渲染某个元素。例如，使用三元运算符或逻辑与&&。
6. 列表渲染：使用map函数遍历数组并为每个元素创建JSX。通常与key属性一起使用，以确保React能够高效地更新列表。

JSX与HTML的对比示例:

• HTML:

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  

• JSX:

  const items = ['Item 1', 'Item 2', 'Item 3'];
  const listItems = items.map((item) => <li key={item}>{item}</li>);
  

3.2 组件化开发

组件是React中构建用户界面的基本单元。它们是可复用的、独立的部分，可以包含自己的状态、逻辑和样式。

函数组件与类组件的对比:

• 函数组件：简单、无状态的组件，通常用于展示。它们没有生命周期方法，不能使用this。

  function MyComponent() {
    return <div>I am a functional component.</div>;
  }
  

• 类组件：可以拥有状态（state）和生命周期方法，适合于更复杂的组件。

  class MyComponent extends React.Component {
    state = { count: 0 };
  
    incrementCount = () => {
      this.setState({ count: this.state.count + 1 });
    };
  
    render() {
      return (
        <div>
          <p>Count: {this.state.count}</p>
          <button onClick={this.incrementCount}>Increment</button>
        </div>
      );
    }
  }
  

组件的Props:

• Props是组件的输入属性，用于从父组件传递数据到子组件。Props是只读的，不能在组件内部被修改。
• 默认Props：可以在组件定义时指定默认Props值。
• Props类型检查：使用prop-types库来定义Props的类型，增加代码的健壮性。

3.3 State与生命周期

State:

• State是组件内部的状态，可以响应用户的操作或其他事件来更新。
• 使用setState方法来更新State，这会导致组件重新渲染。
• State应该是不可变的，更新State时应该使用对象或函数来返回新的State。

生命周期方法:

• 挂载阶段：constructor、getDerivedStateFromProps、render、componentDidMount。
• 更新阶段：getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate。
• 卸载阶段：componentWillUnmount。

生命周期方法的使用示例:

• componentDidMount：用于初始化，如获取数据、设置订阅等。

  class MyComponent extends React.Component {
    componentDidMount() {
      this.fetchData();
    }
  
    fetchData = () => {
      // 获取数据
    };
  }
  

• componentDidUpdate：用于处理状态更新后的DOM操作。

  class MyComponent extends React.Component {
    componentDidUpdate(prevProps, prevState) {
      if (prevState.count !== this.state.count) {
        // 执行一些操作
      }
    }
  }
  

通过这些详细的解释和示例，应该能够更深入地理解React的核心概念和基础语法，为构建复杂的React应用打下坚实的基础。