MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Next.js页面路由与React组件生命周期的交互

2024-08-292.5k 阅读

Next.js 页面路由基础

在 Next.js 中，页面路由是基于文件系统的。简单来说，在 pages 目录下的每一个 JavaScript 文件都会自动成为一个路由。例如，在 pages/about.js 中创建一个文件，它就对应了 /about 这个路由。

动态路由

Next.js 支持动态路由，这在处理列表项详情页等场景非常有用。假设我们有一个博客应用，每篇文章有一个唯一的 ID，我们可以这样创建动态路由：在 pages/post/[id].js 中定义页面。这里 [id] 就是动态参数。

import React from 'react';

const Post = ({ id }) => {
  return <div>Post with ID: {id}</div>;
};

export async function getStaticPaths() {
  // 假设这里从数据库获取所有文章 ID
  const posts = [
    { id: '1' },
    { id: '2' }
  ];
  const paths = posts.map(post => ({ params: { id: post.id.toString() } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return {
    props: {
      id: params.id
    }
  };
}

export default Post;

在上述代码中，getStaticPaths 函数用于生成所有可能的动态路由路径，fallback 设置为 false 表示只有在 paths 中定义的路径才会被渲染为静态页面。getStaticProps 函数接收 params，从中获取动态参数 id 并传递给组件。

嵌套路由

Next.js 也支持嵌套路由。比如在 pages/products/[productId]/details.js，这里 products 是父路由，[productId] 是动态参数，details.js 对应了更深入的子路由。这种结构可以方便地构建复杂的应用架构，例如电商产品详情页中包含不同的子模块。

React 组件生命周期

React 组件的生命周期经历了挂载、更新和卸载三个阶段。不同阶段有不同的生命周期方法可供开发者使用。

挂载阶段

  • constructor：组件创建时首先调用的方法，用于初始化 state 和绑定方法。例如：
import React from'react';

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

export default MyComponent;

这里在 constructor 中初始化了 count 状态，并绑定了 handleClick 方法。

  • componentDidMount：组件挂载到 DOM 后调用。这是发起网络请求、添加事件监听器等操作的好地方。例如：
import React from'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }
  componentDidMount() {
    fetch('https://example.com/api/data')
    .then(response => response.json())
    .then(data => this.setState({ data }));
  }
  render() {
    return (
      <div>
        {this.state.data? <p>{JSON.stringify(this.state.data)}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

export default MyComponent;

在 componentDidMount 中发起了一个网络请求获取数据，并更新 state。

更新阶段

  • shouldComponentUpdate：在组件接收到新的 props 或 state 时调用，返回一个布尔值决定组件是否需要更新。这可以用于性能优化，避免不必要的重新渲染。例如：
import React from'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    // 只有当 count 变化时才更新
    return nextState.count!== this.state.count;
  }
  handleClick() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

这里只有当 count 状态变化时才会触发更新。

  • componentDidUpdate：在组件更新后调用，可用于在更新后执行一些副作用操作，比如更新 DOM 元素的样式等。例如：
import React from'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0
    };
  }
  componentDidMount() {
    this.setState({ width: window.innerWidth });
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.width!== this.state.width) {
      // 根据宽度变化执行一些操作
      console.log('Width has changed');
    }
  }
  handleResize = () => {
    this.setState({ width: window.innerWidth });
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }
  render() {
    window.addEventListener('resize', this.handleResize);
    return (
      <div>
        <p>Window width: {this.state.width}</p>
      </div>
    );
  }
}

export default MyComponent;

在 componentDidUpdate 中比较了更新前后的 width 状态，当宽度变化时执行一些操作。

卸载阶段

  • componentWillUnmount：在组件从 DOM 中移除前调用，可用于清理定时器、移除事件监听器等操作。如上述代码中，在 componentWillUnmount 中移除了 resize 事件监听器。

Next.js 页面路由与 React 组件生命周期的交互

页面切换时的生命周期变化

当在 Next.js 应用中进行页面路由切换时，React 组件的生命周期会相应地发生变化。以从首页 / 切换到 /about 页面为例，首页组件会经历卸载阶段（componentWillUnmount），而 about 页面组件会经历挂载阶段（constructor、componentDidMount 等）。

假设我们有两个页面 pages/index.js 和 pages/about.js：

// pages/index.js
import React from'react';

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    console.log('IndexPage constructor');
  }
  componentDidMount() {
    console.log('IndexPage componentDidMount');
  }
  componentWillUnmount() {
    console.log('IndexPage componentWillUnmount');
  }
  render() {
    return (
      <div>
        <h1>Home Page</h1>
        <a href="/about">Go to About Page</a>
      </div>
    );
  }
}

export default IndexPage;

// pages/about.js
import React from'react';

class AboutPage extends React.Component {
  constructor(props) {
    super(props);
    console.log('AboutPage constructor');
  }
  componentDidMount() {
    console.log('AboutPage componentDidMount');
  }
  render() {
    return (
      <div>
        <h1>About Page</h1>
        <a href="/">Go to Home Page</a>
      </div>
    );
  }
}

export default AboutPage;

当从首页点击链接到 about 页面时，控制台会输出 IndexPage componentWillUnmount，然后输出 AboutPage constructor 和 AboutPage componentDidMount。

动态路由与组件生命周期

在动态路由场景下，当路由参数发生变化时，React 组件不会重新挂载，而是会更新。例如，在 pages/post/[id].js 页面中，当我们切换到不同 ID 的文章页面时，组件会进入更新阶段。

import React from'react';

class PostPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      postData: null
    };
  }
  componentDidMount() {
    this.fetchPostData(this.props.id);
  }
  componentDidUpdate(prevProps) {
    if (prevProps.id!== this.props.id) {
      this.fetchPostData(this.props.id);
    }
  }
  fetchPostData = (id) => {
    // 模拟根据 ID 获取文章数据
    const post = { id, title: `Post ${id}` };
    this.setState({ postData: post });
  }
  render() {
    return (
      <div>
        {this.state.postData? <p>{this.state.postData.title}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

export async function getStaticPaths() {
  const posts = [
    { id: '1' },
    { id: '2' }
  ];
  const paths = posts.map(post => ({ params: { id: post.id.toString() } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return {
    props: {
      id: params.id
    }
  };
}

export default PostPage;

在上述代码中，componentDidMount 中首次获取文章数据，componentDidUpdate 中当 id 参数变化时重新获取数据。

嵌套路由与组件生命周期

在嵌套路由中，父组件和子组件的生命周期相互配合。例如在 pages/products/[productId]/details.js 结构中，products/[productId] 父组件可能在挂载时获取产品的基本信息，而 details.js 子组件在挂载时获取产品的详细信息。

// pages/products/[productId].js
import React from'react';
import Link from 'next/link';

class ProductPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      product: null
    };
  }
  componentDidMount() {
    // 模拟获取产品基本信息
    const product = { id: this.props.id, name: `Product ${this.props.id}` };
    this.setState({ product });
  }
  render() {
    return (
      <div>
        {this.state.product? (
          <div>
            <h2>{this.state.product.name}</h2>
            <Link href={`/products/${this.props.id}/details`}>
              <a>View Details</a>
            </Link>
          </div>
        ) : <p>Loading...</p>}
      </div>
    );
  }
}

export async function getStaticPaths() {
  const products = [
    { id: '1' },
    { id: '2' }
  ];
  const paths = products.map(product => ({ params: { id: product.id.toString() } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return {
    props: {
      id: params.id
    }
  };
}

export default ProductPage;

// pages/products/[productId]/details.js
import React from'react';

class ProductDetailsPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      details: null
    };
  }
  componentDidMount() {
    // 模拟获取产品详细信息
    const details = { id: this.props.id, description: `Details of Product ${this.props.id}` };
    this.setState({ details });
  }
  render() {
    return (
      <div>
        {this.state.details? <p>{this.state.details.description}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

export async function getStaticProps({ params }) {
  return {
    props: {
      id: params.id
    }
  };
}

export default ProductDetailsPage;

当进入 products/[productId] 页面时，ProductPage 组件挂载获取产品基本信息，点击查看详情进入 details.js 页面时，ProductDetailsPage 组件挂载获取详细信息。

利用生命周期进行页面路由相关的操作

数据预取与缓存

在 Next.js 中，可以利用 React 组件生命周期进行数据预取和缓存。例如，在 componentDidMount 中发起网络请求获取数据，如果数据已经缓存，则直接使用缓存数据。

import React from'react';

const cache = {};

class MyPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: cache[this.props.id] || null
    };
  }
  componentDidMount() {
    if (!this.state.data) {
      fetch(`https://example.com/api/data/${this.props.id}`)
    .then(response => response.json())
    .then(data => {
        cache[this.props.id] = data;
        this.setState({ data });
      });
    }
  }
  render() {
    return (
      <div>
        {this.state.data? <p>{JSON.stringify(this.state.data)}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

export async function getStaticPaths() {
  const items = [
    { id: '1' },
    { id: '2' }
  ];
  const paths = items.map(item => ({ params: { id: item.id.toString() } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return {
    props: {
      id: params.id
    }
  };
}

export default MyPage;

这里在 constructor 中检查缓存数据，componentDidMount 中如果缓存没有则发起请求并更新缓存。

路由过渡效果

通过 React 组件生命周期可以实现路由过渡效果。比如在 componentWillUnmount 中添加动画离开效果，在 componentDidMount 中添加动画进入效果。

import React from'react';
import { CSSTransition } from'react-transition-group';

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      in: true
    };
  }
  componentWillUnmount() {
    this.setState({ in: false });
  }
  componentDidMount() {
    this.setState({ in: true });
  }
  render() {
    return (
      <CSSTransition
        in={this.state.in}
        timeout={300}
        classNames="fade"
      >
        <div>
          <h1>My Page</h1>
        </div>
      </CSSTransition>
    );
  }
}

export default Page;

在上述代码中，通过 CSSTransition 组件结合 componentWillUnmount 和 componentDidMount 实现了淡入淡出的路由过渡效果。

处理页面切换时的状态

在页面切换时，有时需要处理一些状态相关的操作。例如，在离开一个页面时保存表单数据，在进入新页面时恢复一些设置。

import React from'react';

class FormPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        name: '',
        email: ''
      }
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    const { name, value } = e.target;
    this.setState(prevState => ({
      formData: {
      ...prevState.formData,
        [name]: value
      }
    }));
  }
  componentWillUnmount() {
    localStorage.setItem('formData', JSON.stringify(this.state.formData));
  }
  componentDidMount() {
    const formData = localStorage.getItem('formData');
    if (formData) {
      this.setState({ formData: JSON.parse(formData) });
    }
  }
  render() {
    return (
      <div>
        <form>
          <label>Name:
            <input
              type="text"
              name="name"
              value={this.state.formData.name}
              onChange={this.handleChange}
            />
          </label>
          <label>Email:
            <input
              type="email"
              name="email"
              value={this.state.formData.email}
              onChange={this.handleChange}
            />
          </label>
        </form>
      </div>
    );
  }
}

export default FormPage;

在 componentWillUnmount 中保存表单数据到 localStorage，在 componentDidMount 中恢复数据。

优化 Next.js 页面路由与 React 组件生命周期的交互

避免不必要的重新渲染

在动态路由和页面切换场景中，要注意避免 React 组件不必要的重新渲染。可以通过 shouldComponentUpdate 方法进行精准控制。例如，在一个列表页面切换不同分类时，如果列表项数据没有变化，就可以阻止重新渲染。

import React from'react';

class ListPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: []
    };
  }
  componentDidMount() {
    // 模拟获取列表数据
    const data = [1, 2, 3];
    this.setState({ listData: data });
  }
  shouldComponentUpdate(nextProps, nextState) {
    // 假设只有 listData 变化时才更新
    return JSON.stringify(nextState.listData)!== JSON.stringify(this.state.listData);
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.listData.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ListPage;

这样，当 props 或 state 变化但 listData 没有实际变化时，组件不会重新渲染，提高了性能。

合理使用生命周期方法

在处理页面路由相关操作时，要合理选择 React 组件生命周期方法。比如，componentDidMount 适合一次性的初始化操作，而 componentDidUpdate 适合在数据更新后执行相关操作。如果在 componentDidMount 中执行大量重复计算的操作，可能会影响性能。

例如，在一个地图页面，在 componentDidMount 中初始化地图实例，而在 componentDidUpdate 中根据新的位置数据更新地图标记：

import React from'react';
import mapboxgl from'mapbox-gl';

class MapPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      map: null,
      markers: []
    };
  }
  componentDidMount() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
    const map = new mapboxgl.Map({
      container:'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40],
      zoom: 9
    });
    this.setState({ map });
  }
  componentDidUpdate(prevProps) {
    if (prevProps.locations!== this.props.locations) {
      const { map } = this.state;
      // 清除旧标记
      this.state.markers.forEach(marker => marker.remove());
      const newMarkers = [];
      this.props.locations.forEach(location => {
        const marker = new mapboxgl.Marker()
        .setLngLat(location)
        .addTo(map);
        newMarkers.push(marker);
      });
      this.setState({ markers: newMarkers });
    }
  }
  render() {
    return (
      <div id="map" style={{ width: '100%', height: '400px' }} />
    );
  }
}

export default MapPage;

这里在 componentDidMount 初始化地图，在 componentDidUpdate 中根据新的位置数据更新地图标记，合理利用了不同的生命周期方法。

结合 Next.js 的特性优化

Next.js 提供了 getStaticProps、getStaticPaths 和 getServerSideProps 等方法，与 React 组件生命周期结合可以进一步优化应用。例如，在 getStaticProps 中获取静态数据，在 componentDidMount 中进行一些客户端特定的初始化操作。

import React from'react';

const Page = ({ data }) => {
  const [clientData, setClientData] = React.useState(null);
  React.useEffect(() => {
    // 模拟客户端数据获取
    const clientData = { message: 'Client - side data' };
    setClientData(clientData);
  }, []);
  return (
    <div>
      <p>Static data: {data}</p>
      {clientData? <p>Client data: {clientData.message}</p> : <p>Loading client data...</p>}
    </div>
  );
};

export async function getStaticProps() {
  // 模拟获取静态数据
  const data = 'Static content';
  return {
    props: {
      data
    },
    revalidate: 60 // 每 60 秒重新验证
  };
}

export default Page;

这里 getStaticProps 获取静态数据，useEffect（类似 componentDidMount）在客户端进行额外的数据获取，同时利用 revalidate 实现增量静态再生，优化了页面性能和数据更新。