JS 如何助力 React 开发？

React 是当下非常流行的前端开发框架，而 JavaScript 作为其核心编程语言，在 React 开发中起着至关重要的作用，那 JS 究竟是如何助力 React 开发的呢？下面我们来详细探讨。

JS 构建 React 组件的基础

在 React 中，组件是构建用户界面的基本单元，而 JS 提供了创建组件的语法和能力，我们可以通过 JS 的函数式组件或者类组件的方式来定义组件。

函数式组件使用简单的 JS 函数来创建，它接收 props（属性）作为参数，并返回一个 React 元素。

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

这里通过 JS 函数的语法，简洁地定义了一个接收 name 属性并展示欢迎信息的组件。

类组件则是通过 ES6 的类语法来创建，它继承自 React.Component，需要实现 render 方法来返回组件的 UI 结构。

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

JS 的类语法为类组件提供了封装性和继承等特性，方便我们管理组件的状态和生命周期。

JS 处理 React 组件的状态

状态（state）是 React 组件的重要部分，它决定了组件的 UI 如何呈现，JS 提供了操作和管理状态的能力。

在类组件中,我们可以通过 this.state 来定义和访问状态，通过 this.setState 方法来更新状态。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn:!prevState.isToggleOn
    }));
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn? 'ON' : 'OFF'}
      </button>
    );
  }
}

这里通过 JS 的对象语法定义了 isToggleOn 状态，通过 setState 方法根据用户点击按钮的操作来更新状态，从而实现按钮文字在 ON 和 OFF 之间切换。

在函数式组件中,随着 React Hooks 的出现，我们可以使用 useState 钩子来处理状态。

import React, { useState } from'react';
function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState 是一个 JS 函数，它返回一个数组，第一个元素是当前状态值，第二个元素是更新状态的函数，通过这种方式，函数式组件也能方便地管理状态。

JS 实现 React 组件的生命周期管理

React 组件有其生命周期，JS 帮助我们在不同的生命周期阶段执行相应的操作。

在类组件中,有 componentDidMount（组件挂载后）、componentDidUpdate（组件更新后）、componentWillUnmount（组件卸载前）等生命周期方法。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {seconds: 0};
  }
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState(prevState => ({
      seconds: prevState.seconds + 1
    }));
  }
  render() {
    return (
      <div>
        <p>Seconds: {this.state.seconds}</p>
      </div>
    );
  }
}

在 componentDidMount 生命周期方法中，通过 JS 的 setInterval 函数设置定时器，在 componentWillUnmount 中通过 clearInterval 清除定时器，实现了组件挂载和卸载时的资源管理。

对于函数式组件,React Hooks 中的 useEffect 钩子可以模拟类组件的生命周期。

import React, { useState, useEffect } from'react';
function Example() {
  const [count, setCount] = useState(0);
  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 更新文档的标题
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect 接收一个函数作为参数，这个函数会在组件渲染后执行（默认情况下，在每次渲染后都会执行），可以在其中进行副作用操作，比如更新文档标题等。

JS 实现 React 组件间的通信

React 应用通常由多个组件组成，组件间的通信至关重要，JS 提供了多种方式来实现组件间的通信。

（一）父子组件通信

• 父组件向子组件传递数据：通过 props（属性）来实现，父组件在渲染子组件时，将数据作为属性传递给子组件。

  function ParentComponent() {
  const message = "Hello from parent";
  return <ChildComponent message={message} />;
  }

function ChildComponent(props) { return

{props.message}

这里父组件 `ParentComponent` 将 `message` 数据通过 `props` 传递给子组件 `ChildComponent`。
- **子组件向父组件传递数据**：通常通过父组件传递给子组件的回调函数来实现。
```jsx
function ParentComponent() {
  const handleChildData = (data) => {
    console.log("Received from child:", data);
  };
  return <ChildComponent onData={handleChildData} />;
}
function ChildComponent(props) {
  const sendData = () => {
    props.onData("Data from child");
  };
  return <button onClick={sendData}>Send Data</button>;
}

子组件 ChildComponent 通过调用父组件传递的 onData 回调函数，将数据传递给父组件。

（二）非父子组件通信

• 使用 Context（上下文）：React 提供的 createContext 方法可以创建一个上下文对象，通过 Provider 和 Consumer 来实现跨组件传递数据。

  const ThemeContext = React.createContext('light');

function App() { return (

function Toolbar() { return (

function ThemedButton() { return (