React.js 如何实现响应式布局

在React.js中实现响应式布局，通常需要结合CSS媒体查询（Media Queries）和React的组件化特性。以下是一些实现响应式布局的方法：

1. 使用CSS媒体查询： CSS媒体查询允许你根据不同的屏幕尺寸应用不同的样式。你可以在组件的CSS文件中定义媒体查询，或者在行内样式中使用@media规则。

   /* 在CSS文件中 */
   .responsive-div {
     width: 100%;
   }
   
   @media (min-width: 768px) {
     .responsive-div {
       width: 50%;
     }
   }
   

   // 在行内样式中
   const responsiveDivStyle = {
     width: '100%',
     '@media (min-width: 768px)': {
       width: '50%',
     },
   };
   
   function MyComponent() {
     return <div style={responsiveDivStyle}>I am responsive!</div>;
   }
   

2. 使用React Hooks： React Hooks（如useState和useEffect）可以帮助你在组件中根据窗口大小的变化来更新状态，从而实现响应式行为。

   import React, { useState, useEffect } from 'react';
   
   function MyComponent() {
     const [windowSize, setWindowSize] = useState(window.innerWidth);
   
     useEffect(() => {
       const handleResize = () => setWindowSize(window.innerWidth);
       window.addEventListener('resize', handleResize);
       return () => window.removeEventListener('resize', handleResize);
     }, []);
   
     return (
       <div>
         {windowSize <= 768 ? (
           <div>I am responsive for small screens!</div>
         ) : (
           <div>I am responsive for large screens!</div>
         )}
       </div>
     );
   }
   

3. 使用第三方库： 有一些流行的React库可以帮助你更容易地实现响应式布局，例如react-responsive、styled-components等。

   import React from 'react';
   import { useMediaQuery } from 'react-responsive';
   
   function MyComponent() {
     const isMobile = useMediaQuery({ maxWidth: 767 });
   
     return (
       <div>
         {isMobile ? (
           <div>I am responsive for small screens!</div>
         ) : (
           <div>I am responsive for large screens!</div>
         )}
       </div>
     );
   }
   

4. 使用Flexbox和Grid布局： CSS的Flexbox和Grid布局模块提供了强大的布局能力，可以帮助你创建复杂的响应式设计。

   /* 使用Flexbox */
   .flex-container {
     display: flex;
     flex-wrap: wrap;
   }
   
   .flex-item {
     flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
   }
   
   @media (max-width: 600px) {
     .flex-item {
       flex-basis: 100%;
     }
   }
   
   /* 使用Grid布局 */
   .grid-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }
   

结合这些方法，你可以创建出既美观又功能强大的响应式React应用。记得在实现响应式设计时，始终要考虑不同设备和屏幕尺寸的用户体验。