此bounty已结束。回答此问题可获得+100声望奖励。奖励宽限期将在20小时后结束。Adam Zerner希望吸引更多人关注此问题。
我想做这样的事情:
const GreetingWithCounter = (props) => {
const { name, count } = props;
return (
<div>
<div>Hello {name}</div>
<button onClick={() => render({ ...props, count: count + 1 })}>
{count}
</button>
</div>
);
}
<GreetingWithCounter name="Alice" count={0} />
我想重新渲染一个组件,但不想为它的props
设置新的值。有办法吗?通过这三个问题,我找到了重新渲染一个组件的方法,但不想为props(1,2,3)设置新的值。
内容
我正在考虑一种简化React的方法。我真的很喜欢将React作为MVC中的视图层的心理模型,其中UI = F(state)。但是当“state”来自如此多不同的地方时,事情会变得混乱:props
、useState
、useReducer
、“原始”useContext
、Redux(我认为它使用useContext
),以及其他内容。
如果一切都是基于道具呢?
- 对于本地状态,你可以做我在上面的例子中做的。你可以在执行
<GreetingWithCounter name="Alice" count={0} />
时初始化count
的本地状态,然后通过重新渲染来更新它。这意味着更少的干燥,因为你必须重复count={0}
代码,而不是在GreetingWithCounter
中只使用一次。 - 你必须做支柱钻孔,而不是
useContext
的东西。 - 这种方法可能会使React变慢。
- 尽管如此,我还是假设:1)从道具中获得一切的心理模型更简单; 2)在大量的应用程序中,优点大于缺点。
7条答案
按热度按时间xmq68pz91#
道具不应该在React中发生变化。这正是道具和状态之间的区别。React实现这一点的方法是使用状态作为计数。您可以将计数的初始状态作为道具传递,并执行以下操作:
const [count, setCount] = useState(initialCount)
。您的onClick
处理程序将递增count
,这也是state。我知道这不是您想要的,但这是React的工作方式。laximzn52#
在React Props中,无法在子组件中更改值,但可以在父组件中进行更改。
xj3cbfub3#
感谢您想要指出的变化和您想要添加的价值,但可能有一些点,您错过了什么React在概念上试图提供props和state之间的分离。
因此,你试图做的事情在概念上不适合这个目的,并且违反了React试图完成的目标。
事实上,你可能会提到创建另一个库/框架,在引入**
props are the new state
**概念时成功地完成了它,但在这个特定的例子中,没有可能的方法以React的方式成功。j2datikz4#
你不能改变子组件中的props值,但你有两种方法来处理它,我假设你只想在子组件中使用count,而不需要父组件中的count值,在这种情况下,你可以使用props.count作为初始状态,类似如下:
但如果要从父级访问它的值,最好将setter传递给子级
这样的东西:
或者如果它的子节点太深,需要向它的所有树发送道具,最好使用状态管理,如Redux、Context或...
lsmepo6l5#
这是你想要的方式吗?:
crcmnpdw6#
你想做的事情违背了国家管理的React哲学。正确的方法,你可以检查其他答案,甚至你自己已经张贴在问题。
但是如果你真的想这么做,在它的魔力背后,React也只是JavaScript。因此,我们只需要在React思维方式之外实现render函数。我们知道React在状态改变魔力或属性改变时重新呈现。我们只需要以某种方式将你要求的render方法与set state连接起来。类似下面的东西应该可以工作。
很多人会对上面的代码尖叫,它肯定偏离了预期的用途。
如果你想更进一步,你也可以只为整个应用程序设置一个状态,并将此状态传递给每个组件。瞧!你刚刚创建了一个单例状态和一个单向数据流,这是一个糟糕的redux版本,这可能会降低Web应用程序的性能,因为在文本框中键入每个字母等操作将重新呈现整个页面。
67up9zun7#
正如其他人已经提到的,组分在React中是受控的或不受控的(或两者的混合)。
如果你把状态保留在组件本身-它是不受控制的。你可以通过改变
key
属性从父组件重置它的状态到内部。如果您将状态保留在父级中-它是受控组件,并通过属性/回调更改其状态。
你在你的例子中所展示的,你想用一些语法糖来实现不受控制的组件。
实施示例:
您可以在整个项目中重用
usePropsWithRender
,但它只不过是useState
的一个简单的 Package 器,我看不出它比直接使用useState
有什么好处。