react教程之props反模式——anti-pattern
在传递props这篇文章中我们了解到了react之props概念以及是如何使用的。本篇我们来介绍在getinitialstate中用props来产生state的这种用法。这种使用方法被称之为反模式——anti-pattern。
之所以称其为反模式是因为在getinitialstate中使用props生成state会导致重复“来源信任”问题。并且还犹豫getinitialstate函数只是在组件被第一次渲染时调用。也就是说当该组件第二次再使用render渲染的时候，getinitialstate函数不会再被调用。也就是说如果我们想通过第二次渲染改变props的值从而改变state的值是不可能的。
下面我们来看一段代码：
var messagebox = react.createclass({
getinitialstate: function() {
return {name: 'mr. ' this.props.name};
},
render: function() {
return
}
});
reactdom.render(
document.getelementbyid('content')
);
对于上面的例子，可以说就是一种反模式的运用。如果我们想再次渲染组件messagebox改变props的name值。我们会发现div中的内容不变的，依然是 mr. rogers而不是mr. onmpw。
reactdom.render(
document.getelementbyid('content')
);
reactdom.render(
document.getelementbyid('content')
);
所以说，对于上面的例子，div中直接使用this.props相对于this.state更好一些。
var messagebox = react.createclass({
render: function() {
return
}
});
reactdom.render(
document.getelementbyid('content')
);
这个例子的结果就是在页面上输出 mr. onmpw。
reactdom.render(
document.getelementbyid('content')
);
如果我们再次渲染，那就会就会是mr. rogers。
上面介绍的情况就是props在getinitialstate中使用的反模式。当然，如果我们能明确的用途，在getinitialstate中使用也不会产生反模式的情况。比如，初始化一个值，该prop的值不会改变。
var counter = react.createclass({
getinitialstate: function() {
return {count: this.props.initialcount};
},
handleclick: function() {
this.setstate({count: this.state.count 1});
},
render: function() {
return
}
});
reactdom.render(
document.getelementbyid('content')
);
上面的例子就避免了反模式的产生。上面的例子都是借用官方文档中的例子来修改说明的，希望本文对大家学习有所帮助。
转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处
本文地址：
相关文章
在 vue 中如果子组件改变props里的数据会发生什么
发布时间：2023/03/30 浏览次数：453 分类：vue
-
在 vue 中，子组件改变 props 中的数据会导致父组件和其他子组件的响应性发生变化。 首先，需要了解 props 是从父组件向子组件传递数据的一种方式。在组件中定义 props 后，父组件可以
node.js 与 react js 的比较
发布时间：2023/03/27 浏览次数：173 分类：node.js
-
本文比较和对比了两种编程语言，node.js 和 react。react 和 node.js 都是开源 javascript 库的示例。 这些库用于构建用户界面和服务器端应用程序。
在 vue 中设置 props 的默认值
发布时间：2023/03/24 浏览次数：1064 分类：vue
-
vue 是一种流行的 javascript 框架，它可以帮助开发人员构建交互式的用户界面。在 vue 中，组件是构建用户界面的基本单元，而 props 是组件之间传递数据的一种常用方式。在本文中，我们
在 typescript 中 react usestate 钩子类型
发布时间：2023/03/19 浏览次数：246 分类：typescript
-
本教程演示了如何在 typescript 中使用 react usestate hook。
typescript 中的 react 事件类型
发布时间：2023/03/19 浏览次数：477 分类：typescript
-
本教程演示了如何在 typescript 中为 react 事件添加类型支持。
在 react 中循环遍历对象数组
发布时间：2023/03/18 浏览次数：602 分类：react
-
在 react 中循环对象数组： 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组，其中包含传入函数的结果。 export default function app (
获取 react 中元素的类名
发布时间：2023/03/18 浏览次数：340 分类：react
-
在 react 中使用 event.target 获取元素的类名 获取元素的类名： 将元素上的 onclick 属性设置为事件处理函数。 访问元素的类名作为 event.currenttarget.classname 。 export default function app () { cons
如何将 key 属性添加到 react 片段
发布时间：2023/03/18 浏览次数：206 分类：react
-
使用更详细的片段语法将 key 属性添加到 react 片段，例如 react.fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组，而不向 dom 添加额外的节点。 import react from react
如何在 react 中删除事件监听器
发布时间：2023/03/15 浏览次数：592 分类：react
-
在 react 中删除事件监听器： 在 useeffect 挂钩中添加事件侦听器。 从 useeffect 挂钩返回一个函数。 当组件卸载时，使用 removeeventlistener 方法移除事件监听器。 import {useref, useeffect} from r
