如何在组件变大时拆分组件。 ReactJs

作者: 那年
发布时间: 2024-12-29 11:23:21 (1月前)
转自：

4 条回复

0#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 至于我看到你的代码，你已经以正确的方式划分组件，在我看来，你不应该进一步打破它们。 </p> <P> 但是，您可以对Game.js文件进行一些更改： </p> <UL> <LI> <P> 您可以将函数划分为utils文件（单独的.js文件），以便更好地理解代码。 </p> </LI> <LI> <P> 您可以将样式化组件移动到Game.style.js等文件中 </p> </LI> <LI> <P> 您也可以使用钩子来指示方向状态。 </p> </LI> </UL> <P> 下面给出了样式组件的示例： </p> <P> 的<strong> Game.js </强> </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> import React from 'react' import Board from './Board' import Toolbar from './Toolbar' // styles import {Row, Wrapper} from './Game.style'; class Game extends React.Component { constructor(props) { } initGame = () => { } updateCanvas = () => { } // for (let i = 0; i < snake.length; i++) { // ctx.fillStyle = '#3682c9' // ctx.fillRect(snake[i].x, snake[i].y, squareWidth, squareHeight) // } // ctx.fillStyle = '#a2d149' // ctx.fillRect(0, 0, 20, 20) // ctx.fillStyle = '#aad751' // ctx.fillRect(20, 0, 20, 20) // ctx.fillStyle = '#a2d149' // ctx.fillRect(40, 0, 20, 20) } drawSnake = () => { } generateFood = () => { } drawFood = () => { } changeDirection = event => { } moveSnake = () => { } startGame = () => { } componentDidMount() { this.refs.canvas.focus() this.initGame() } componentDidUpdate() {} render() { const { boardWidth, boardHeight } = this.state console.log(this.state) return ( <Wrapper> <Toolbar onClick={this.initGame} /> <canvas ref="canvas" onKeyDown={this.changeDirection} tabIndex="0" width={boardWidth} height={boardHeight} /> </Wrapper> ) } } export default Game </code> </pre> </DIV> </DIV> <P> </p> <P> 的<strong> Game.style.js </强> </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> import styled from 'styled-components' export const Row = styled.div` display: flex; &:nth-child(odd) { div:nth-child(even) { background-color: #aad751; } } &:nth-child(even) { div:nth-child(odd) { background-color: #aad751; } } `; export const Wrapper = styled.div` display: flex; flex-direction: column; height: 100vh; justify-content: center; align-items: center; `; </code> </pre> </DIV> </DIV> <P> </p> <P> PS。我非常强调从另一个utils文件中导入这些函数。 </p> </DIV>

编辑
1#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> React只是组件调制，您需要以分层格式隔离组件，这些格式表明父子关系。假设您有一个组件，如您所说的那样是一个很大的组件，将组件划分为称为B，C，D组件的子组件。组件可能包含不同的子模块，请将导航栏视为一个或侧边栏作为一个或您的树视图和样板，将它们分开并为它们创建组件，并在父组件上调用它们。将A视为高阶组件或智能组件，并将组件（b，c，d）作为子组件或哑组件，只接受来自A的道具或值并相应地呈现它，这样就可以实现干净的代码和灵活适用于您的应用。请参考HOC，纯组件或Flux，Redux，您可以解决您在应用程序中遇到的任何问题。 </p> </DIV>

编辑
2#
回复此人
绵绵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果有多个动作作用于单个状态，则它们都需要放在同一个组件中。状态变化的方式越多，组件就越大。如果组件具有影响多种类型状态的操作，则该组件将变得庞大。 </p> <P> 这就是为什么你要在可能的情况下分解出更小的组件 </p> <P> 这是一个非常好的例子 <a href="https://frontarm.com/james-k-nelson/how-should-i-separate-components/" rel="nofollow noreferrer"> 你如何分开组件？ </A> </p> <P> 实现这一目标的更高级别是Code-Splitting。 Code-Splitting是Webpack和Browserify等捆绑器支持的功能（通过因子包），可以创建多个可在运行时动态加载的包。 </p> <P> 代码拆分您的应用可以帮助您“懒惰”加载用户当前需要的东西，这可以显着提高您的应用程序的性能。虽然您没有减少应用程序中的总代码量，但您已经避免加载用户可能永远不需要的代码，并减少了初始加载期间所需的代码量。 </p> <P> React docs提供了非常简单的Code拆分方法 <a href="https://reactjs.org/docs/code-splitting.html" rel="nofollow noreferrer"> 这里 </A> </p> </DIV>

编辑

登录后才能参与评论