javascript - 使用适当的状态/ Prop react 自修改组件

coder 2024-07-19 原文

我现在正在做一个宠物项目，我决定使用 React 作为 View 。我对它的开发还很远，但我刚刚开始意识到我可能不明白如何很好地使用 React，因为似乎为了做简单的事情，你必须采取一些非常极端的措施!

所以，是时候举一个任意的例子了!这是适用于 JsFiddle 的代码

var Name = React.createClass({
    render: function() {
        return <button onClick={this.props.onClick.bind(null, this.props.id, 'John')}>{this.props.value}</button>
    }
});

var NameContainer = React.createClass({
    getInitialState: function() {
        return {
            names: [
                { id: 1, name: 'Fred' },
                { id: 2, name: 'George' }
            ]
        };
    },
    handleClick: function(id, newName) {
        names = this.state.names;
        names.map(function(obj){
            if (obj.id === id) {
                obj.name = newName;
            }
            return obj;
        });
        this.setState({
            names: names
        });
    },
    render: function() {
        var handleClick = this.handleClick;

        var children = this.state.names.map(function(obj){
            return <Name key={obj.id} id={obj.id} value={obj.name} onClick={handleClick} />;
        });

        return (
            <div>
                {children}
            </div>
        );
    }
});

这个想法是我正在尝试制作一个可以自行修改的组件。在此示例中，修改只是让组件能够将其名称从其原始值更改为“John”。

为什么这么复杂？

看起来这将是多更简单的方法是在 Name 组件中设置一些状态并让它们自己修改。不幸的是，据我所知，唯一的方法是根据违反“getInitialState 中的 Prop 是反模式”的 Prop 设置初始状态。

为什么不直接手动制作组件？

在我的实际应用程序中，数据来自服务器，因此必须一次获取所有数据。这就是为什么我使用 getInitialState 来预加载数据，而不是仅仅手动创建多个 Name 组件。此外，他们在 React 文档中说状态应该存储在一个公共(public)父组件中，所以这段代码遵循这种模式。

事情开始变得复杂

当您需要修改该状态时，问题就开始了。由于它以对象数组的形式出现(对于从服务器序列化数据非常典型)，您不能立即获取与您正在处理的组件对应的特定对象。据我所知，唯一知道的方法是将 ID 传递给所有子元素，这样当事件处理程序被触发以标识自己时，它们可以将其传回。尽管如此，您仍然必须遍历状态中的每个元素以找到您实际尝试修改的元素。

复杂性加剧...

更糟糕的是，您似乎无法从声明了该属性的组件内部访问该属性，因此为了获得您需要的所有信息，您必须对该值进行双重设置(在我的例子)。这是对我来说真正危险的地方，因为这似乎是实现目标而不破坏模式的唯一方法是绕过他们系统的一部分。

另一件让我恼火的事情是，您必须将事件处理程序从状态保持对象一直传递到子对象。在这个例子中，这很简单，但在我的实际应用中，这个关系有四层深。在我看来，所有这些中间步骤只是因为缺少 props 传递链中的一个步骤而增加了引入错误的可能性。

所以答案是什么？

这就是 React 的方式吗？是否有一些我完全忽略的巨大捷径？如何在保持我指定的约束的同时更简单地做到这一点？

最佳答案

我认为，您的示例存在一些问题，使其变得过于复杂:Name 组件是一个有漏洞的抽象，而 Name 组件知道的太多了。 (这些实际上有点交织在一起。)

在解决这些问题之前，我想绕道而行，讨论一下我设计组件的方法。我发现混合自顶向下和自底向上的方法在构建 React 应用程序时非常有用。使用自上而下帮助您确定要构建的组件，方法是从组件的概念开始，确定其子组件应该是什么，然后确定子组件的子组件，令人作呕。在确定组件之后，是时候切换到自下而上的方法了，在这种方法中，您采用最基本的组件(无需新的子组件来构建它)并尽可能自包含和独立地构建它，然后选择下一个最基本组件并实现它，并重复直到完成。

在实现组件时，您可以将传入的 props 视为供其他组件使用的 API，并且您希望使其尽可能专注于您的组件应提供的功能。

所以回到你的例子中的问题。

首先是你的 Name 组件是一个有漏洞的抽象。 (是的，我知道这只是一个随意的例子，但请耐心等待。)该组件将 onClick 作为其 API 的一部分(因为它需要作为 Prop )。这是有问题的，因为它告诉想要使用它的组件，“嘿，我这里有一个按钮!”这对您当前的 Name 实现没问题，但是当您需要更改 Name 以具有其他行为时会发生什么？ onClick 可能不再有意义，如果您想更改该 Prop 名称，那么该更改会影响您的其余代码。相反，您可能会考虑使用名称“更新”，这对于 Name 组件来说似乎是一个合理的操作，同时隐藏了它内部包含按钮的事实。当然，这可以看作是“命名事物时要小心”的论点，但我认为良好的命名是构建易于使用且以后易于修改的组件的宝贵工具。

另一个问题是 Name 组件对父实现了解太多，导致以后很难在其他组件中使用。不是在 Name 组件中运行“bind”，让我们假设拥有的容器传递一个带有单个参数的函数 - newName。在 name 组件中，您只需要使用您想要的新名称调用该函数。 Name 不关心这如何影响任何其他状态，并且您已经有效地推迟了解决该问题，直到您别无选择。 Name 组件看起来像:

 var Name = React.createClass({
    render: function() {
        return <button onClick={() => this.props.update('John')}>{this.props.name}</button>;
    }
});

请注意，您不再需要 id；您只需接受并更新名称。

因为您实际上必须担心更新 NameContainer 组件中的名称(因为数据就在那里)，所以您可以担心那里。为避免遍历所有 id，让我们创建一个函数，该函数接受一个名称对象和一个新名称，然后将每个名称对象绑定(bind)到该函数，类似于您在 Name 组件中的内容。 (剩下的是一个接受单个参数 newName 的函数，我们可以将其用作 Name 的更新函数!)。代码如下:

var NameContainer = React.createClass({
    getInitialState: function() {
        return {
            names: [
                { id: 1, name: 'Fred' },
                { id: 2, name: 'George' }
            ]
        };
    },
    update: function(obj, newName) {
        obj.name = newName;
        this.setState({ names: this.state.names });
    },
    render: function() {    
        var children = this.state.names.map(function(obj){
            return <Name key={obj.id} name={obj.name} update={this.update.bind(null, obj)} />;
        }, this);

        return (
            <div>
                {children}
            </div>
        );
    }
});

这确实简化了您的组件，现在 Name 可以在更广泛的上下文中使用。我已使用描述的更改更新了您的示例 here ，并且为了踢球，我添加了 Name here 的不同实现. NameContainer 不必更改，因为 Name API 没有更改，即使
尽管 Name 的实现在两者之间有很大的不同。

使用这种自下而上的方法有助于解决您对通过子组件链传递 props 的担忧。当您构建和测试一个组件时，您只需要关心您正在使用该组件解决的非常具体的问题；确保您将适当的 Prop 传递给其子组件。由于您专注于一个非常具体的问题，因此您不太可能错过传递关键数据的机会。

你可能看到这个，仍然想知道“为什么这这么复杂？”。考虑一个应用程序，您希望以不同的方式同时显示相同的数据(例如，图表及其相应的数据表)。 React 为您提供了一种跨组件共享数据并保持同步的方法。如果您持有所有数据并尽可能在本地操作它们(尽可能在子组件链中)，那么您将必须自己实现组件之间的同步。通过将数据放置在组件链的尽可能高的位置，您可以(有效地)将这些数据设为全局，而 React 可以担心其余的细节。你担心传递数据以及如何渲染数据，剩下的由 React 来完成。

最后要注意的是，如果您的应用程序的复杂性不断增加，您可以考虑查看 Flux .它是一种架构模式，可帮助管理您的应用程序复杂性。这不是 Elixir ，但当我在一些中等复杂的应用程序上使用它时，我发现它非常好。

关于javascript - 使用适当的状态/ Prop react 自修改组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30817269/

自修 javascript br 的 Name reactjs

有关javascript - 使用适当的状态/ Prop react 自修改组件的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 在 Ruby 中使用匿名模块 - 2
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？最佳答案三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
ruby - 使用 ruby 和 savon 的 SOAP 服务 - 2
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

javascript - 使用适当的状态/ Prop react 自修改组件

有关javascript - 使用适当的状态/ Prop react 自修改组件的更多相关文章

随机推荐