在React中进行道具钻探的好处

2020年12月30日11:21:04 发表评论 30 次浏览

本文概述

道具钻探简介

在使用React时, 始终需要与不同组件共享数据。这可以使用螺旋钻机以最基本的方式来实现。道具钻探允许组件之间的单向数据共享。以道具形式传递或共享的数据。

让我们考虑下图:

解释道具钻探工作原理的图。

为了在C组件中访问A组件中的数据, 必须将其作为prop向下传递给B组件, 最后传递给C组件。这称为线程。

通过以上解释, 你可以了解什么是支撑钻探以及我们为什么需要它的基础知识。

现在, 让我们继续使用上面学到的内容创建一个简单的应用程序。可以找到本教程的所有代码这里.

首先, 让我们在React应用程序的src文件夹中创建两个文件, 分别命名为app.js和name.js。

接下来, 我们将下面的代码复制到name.js文件中:

import React from 'react';
const Name = () =>{
  return(
  <div>
     {/* names should be here*/}
  </div>
  )
}
export default Name;

现在, 让我们将以下代码添加到app.js文件中:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

在React中进行道具钻探的好处1
import React, {useState} from 'react';
import Name from './Names'
const App = () =>{
  const [data , setData] = useState([
    {
     name:'Ijeoma Belinda', age: 13, }, {
     name:'Ozioko Chioma', age: 17, }
  ])
  return(
    <Name data = {data} />
  )
}
export default App;

请注意, 我们需要在其中显示的数据名称.js存储在app.js文件作为状态。为了将其作为道具传递, 我们需要用以下代码替换第16行中的代码:

<Name data = {data} />

现在, 我们可以在name.js文件中使用它, 如下所示:

import React from 'react';
const Name = (props) =>{
  return(
  <div>
      {props.data.map( unitData => <h1>{unitData.name}</h1>)}
  </div>
  )
}
export default Name;

我们对app.js和name.js的最终代码应如下所示:

import React, {useState} from 'react';
import Name from './Names'
const App = () =&gt;{
  const [data , setData] = useState([
    {
     name:'Ijeoma Belinda', age: 13, }, {
     name:'Ozioko Chioma', age: 17, }
  ])
  return(
    &lt;Name data = {data} /&gt;
  )
}
export default App;

下面的name.js文件:

import React from 'react';
const Name = (props) =>{
  return(
  <div>
      {props.data.map( unitData => <h1>{unitData.name}</h1>)}
  </div>
  )
}
export default Name;

注意道具将作为参数添加到功能组件。

如果一切都正确完成, 则现在应在浏览器中显示状态下存储的数据。

道具钻探的好处

当在小型应用程序中工作时, 支柱钻探可以用作组件之间数据传输的快速简便方法。与其他常见的数据传输方法不同, 道具钻探相对易于学习和实施。

除此之外, 可以很容易地根据状态更改更新作为道具传递的数据, 以反映新的更改。

为了进一步了解这一点, 让我们回到app.js文件, 并使用新用户的数据来更新状态, 如下所示:

import React, {useState , useEffect} from 'react';
import Name from './Names'
const App = () =>{
  const [data , setData] = useState([
    {
     name:'Ijeoma Belinda', age: 13 }, {
     name:'Ozioko Chioma', age: 17
    }
  ])
  useEffect(() => {
   setData([
   ...data, {
      name:'Eze ifechi', age: 17, }
  ])
  }, [])
  return(
    <Name data = {data} />
  )
}
export default App;

你会注意到, 浏览器中呈现的页面已被立即更新以反映新的更改, 而无需添加任何额外的代码或逻辑。

钻探的缺点

道具钻探确实有其缺点, 在某些情况下不值得。随着代码库的增加, prop钻探可能会使你的代码变得过于复杂, 而添加更多的代码只会使情况变得更糟。

除此之外, 还可以将props传递给不一定需要它的组件, 而仅仅是将数据传递到子组件所需的组件, 从而导致代码库不必要的增加。

为了演示这一点, 让我们通过添加一个名为singleName.js的新文件并在我们的name.js文件中呈现它来调整代码, 如下所示:

import React from 'react';
import SingleName from './singleName'
const Name = (props) =>{
  return(
  <div>
      {props.data.map( unitData => <SingleName unitData = {unitData} />)}
  </div>
  )
}
export default Name;

接下来, 将以下代码添加到新文件中(singleName.js):

import React from 'react';
const SingleName = (props) =>{
  return(
  <div>
      <h1>{props.data.name}</h1>
  </div>
  )
}
export default SingleName;

请注意, 即使数据不需要传递到name.js文件也可以到达子组件(在本例中为singleName.js)。对于某些人来说, 上述问题可能不是问题, 尤其是在你的项目相对较小的情况下。

随着代码库的增加, 可能很难跟踪道具名称, 尤其是在线程中途更改道具名称的情况下。

如果遇到这种情况, 可能很难解决。

如何解决这些问题

首先要做的是使用更少的组件。避免添加不必要的组件, 这些组件将需要进行钻探, 以防止你的代码库变得太大。

现在, 请务必注意, 这并不意味着你应该将代码仅塞入一个组件。但是, 在某些情况下, 你确实不需要添加额外的组件。在这种情况下, 请记住, 你不想使代码过于复杂。

你可以做的另一件事是始终使用默认的道具名称, 以便于跟踪它。

你还可以在应用程序中使用其他替代方式来进行钻探。在几乎所有应用程序部分都需要数据的情况下, 可以使用Context API。 Context API可以为应用程序的不同部分提供所需的所有数据, 而不会带来辅助钻探带来的所有复杂性。

总结

道具钻探(尽管有缺点)仍然是在组件之间进行数据传输的一种可行方法, 应该用于相对较小的应用程序。但是, 在使用大型应用程序时, 不建议将其作为主要的数据传输方法。

全面了解生产React应用

调试React应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪Redux状态, 自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间,

尝试notlogy

.

在React中进行道具钻探的好处2
LogRocket仪表板免费试用横幅

日志火箭就像Web应用程序的DVR, 实际上记录了React应用程序中发生的一切。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 并使用客户端CPU负载, 客户端内存使用情况等指标进行报告。

notlogy Redux中间件软件包在你的用户会话中增加了一层可见性。 notlogy记录Redux存储中的所有操作和状态。

现代化如何调试React应用程序-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: