迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > React >

React教程之Props反模式——Anti-Pattern

作者:迹忆 最近更新:2022/12/04 浏览次数:

传递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 <div>{'Mr. '+this.state.name}</div>;
    }
});
ReactDOM.render(
    <MessageBox name="Rogers" />,
    document.getElementById('content')
);

对于上面的例子,可以说就是一种反模式的运用。如果我们想再次渲染组件MessageBox改变Props的name值。我们会发现div中的内容不变的,依然是 Mr. Rogers而不是Mr. Onmpw。

ReactDOM.render(
    <MessageBox name="Rogers" />,
    document.getElementById('content')
);
ReactDOM.render(
    <MessageBox name="Onmpw" />,
    document.getElementById('content')
);

所以说,对于上面的例子,div中直接使用this.props相对于this.state更好一些。

var MessageBox = React.createClass({
    render: function() {
        return <div>{'Mr. '+this.props.name}</div>;
    }
});
ReactDOM.render(
    <MessageBox name="Onmpw" />,
    document.getElementById('content')
);

这个例子的结果就是在页面上输出 Mr. Onmpw。

ReactDOM.render(
    <MessageBox name="Rogers" />,
    document.getElementById('content')
);

如果我们再次渲染,那就会就会是Mr. Rogers。

上面介绍的情况就是Props在getInitialState中使用的反模式。当然,如果我们能明确Props的用途,在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 <div onClick={this.handleClick}>{this.state.count}</div>;
    }
});
ReactDOM.render(
    <Counter initialCount={7}/>,
    document.getElementById('content')
);

上面的例子就避免了反模式的产生。上面的例子都是借用官方文档中的例子来修改说明的,希望本文对大家学习React有所帮助。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Vue 中如果子组件改变props里的数据会发生什么

发布时间:2023/03/30 浏览次数:217 分类:Vue

在 Vue 中,子组件改变 props 中的数据会导致父组件和其他子组件的响应性发生变化。 首先,需要了解 props 是从父组件向子组件传递数据的一种方式。在组件中定义 props 后,父组件可以

Node.js 与 React JS 的比较

发布时间:2023/03/27 浏览次数:137 分类:Node.js

本文比较和对比了两种编程语言,Node.js 和 React。React 和 Node.js 都是开源 JavaScript 库的示例。 这些库用于构建用户界面和服务器端应用程序。

在 Vue 中设置 props 的默认值

发布时间:2023/03/24 浏览次数:221 分类:Vue

Vue 是一种流行的 JavaScript 框架,它可以帮助开发人员构建交互式的用户界面。在 Vue 中,组件是构建用户界面的基本单元,而 props 是组件之间传递数据的一种常用方式。在本文中,我们

在 React 中循环遍历对象数组

发布时间:2023/03/18 浏览次数:124 分类:React

在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间:2023/03/18 浏览次数:162 分类:React

在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间:2023/03/18 浏览次数:152 分类:React

使用更详细的片段语法将 key 属性添加到 React 片段,例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组,而不向 DOM 添加额外的节点。 import React from react

如何在 React 中删除事件监听器

发布时间:2023/03/15 浏览次数:203 分类:React

在 React 中删除事件监听器: 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时,使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便