react中props和state的用法区分

最新推荐文章于 2023-11-26 21:48:06 发布
最新推荐文章于 2023-11-26 21:48:06 发布
阅读量169 收藏 1
点赞数
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hwqlet/article/details/114801020
版权

props和state

  • props简单来说就是从父组件继承而来的map，当前组件不能修改，需要父组件重新传递来改变
  • state是这个组件自身的属性map，需要用到setState方法来进行改变，也可以用
查看组件props和state的chrome插件

我平时常用的是ReactDeveloperTools，当然你也可以用console.log来打印出来，但是console.log在async和await的方法中打印的结果可能与预期不符

state不允许使用的类型

在setState中不能去改变state，因为会导致不断递归，还有就是一些会让组件重新加载（render）的里面不能改变state

props改变时怎么触发子组件的更新

用componentDidUpdate，传入前后两种props，用lodash-es的一些比较方法来进行此次props改变是否需要触发子组件的更新

平时使用

一般创建一个父组件开始，初始化时就会加载props，这里面一般都是些继承而来的行为所需要的属性，而state是当前组件的一些特殊行为需要的属性。
虽说setState不建议每次更新太多数据，但是react有对这个方法进行优化，进行的是差异化更新的

HWQlet
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React props和state属性的具体使用方法
08-27
本篇文章主要介绍了React props和state属性的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【React 进阶】props 和 state 的区别详解
XH_jing的博客
02-24 7453
时隔一年半之久再次重新学习 React，好多都还是原来的样子，这次我要重新开启 React 的大门，希望各位小伙伴可以一起讨论学习呦～ 前言 今天我们开始第一个专题：React 中 关于 props 和 state。当然我们不是对 props 和 state 基本用法的介绍，而是尝试由浅入深的来解释 props 和 state，并且归纳使用它们时的注意事项。 我们在开发应用时，必然是要与数据进行频繁交互的。React 的核心思想是组件化的思想，所有的页面会被切分成一些独立的、可复用的组件。 那么数据.
react父子组件各自生命周期函数加载的先后顺序
u011927449的博客
08-14 1454
理解记忆总结： 父组件即将挂载(最外层的父组件都还没准备进入，其内部的子组件当然更没进入了) -》 子组件即将挂载 -》 子组件挂载完成(父内部都没完成，父当然不能算完成) -》 父组件挂载完成。 类构造函数(class constructor)是类初始化运行的，所以都在本组件的所有生命周期钩子之前执行； ———————补充：2017.12.21——————————— 页面第一次加载的时候render方法位于componentWillMount之后，componentDidMount之前；之后...
区分react中的state和 props
weixin_43850639的博客
05-12 1091
可以实现组件的动态更新和数据流动，从而构建交互性强、可复用的组件。是两个不同的概念，用于处理组件的数据和属性。，可以有效地管理组件的数据和传递数据。用于存储和管理组件的内部状态，而。用于传递数据给组件。在 React 中，
react中 state和props的区别
最新发布
子玉的博客
11-26 438
当props发生变化时，也会触发组件重新渲染，但如果父组件重新渲染时，props没有发生变化，那么子组件不会重新渲染。props是组件从父组件接收的属性，它们是只读的，不能由组件自己修改，只能由父组件传递给子组件。当父组件的props发生变化时，React会重新渲染子组件，并更新子组件的视图。在React开发中，通常我们将状态存储在组件的state中，而将属性传递给组件的props中。4. 作用域不同：state仅在组件内部访问，而props可以在组件内部和外部访问，因为props是从父组件传递而来的。
React 中props和state的区别
划水队员的博客
08-25 949
文章目录前言一、props用法二、给props设置一个默认值三、State 和 Props两者的区别总结 前言 state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 一、props用法 class MyComponent extends React.Component { //此处的构造器是可以省略的 co
React-Native中props具体使用详解
08-29
本篇文章主要介绍了React-Native中props具体使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React中组件的props.children
01-20
props.children是用于将从父组件传递过来的标签放置到子组件中 1.创建父组件 首先引入react和reactdom import React from 'react' import ReactDOM from 'react-dom' 创建父组件 class ParentDom extends React....
react高阶组件添加和删除props
10-17
主要介绍了react高阶组件添加和删除props，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
React中state和props的区别
weixin_44552249的博客
03-06 604
. React中state和props的区别 props props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。 state state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。 区
浅谈React的props和state
筱葭的博客
04-25 3981
在React里有两种数据模型：props 和state。 1、state 1) state的作用： state是React中组件的一个对象，React把用户界面当作状态机，用户界面会随着state变化而变化，根据状态变化渲染用户界面，可以轻松让用户界面与数据保持一致。也即是说，更新组件的state会导致重新渲染用户界面，而不需要操作DOM。 2) state的原理： 常用的通知Reac
react中的state和props详解
qq_39266265的博客
10-26 986
前言 React中数据的流向是自顶向下（从父组件到子组件）单向流动的，数据主要存储在State和Props中，接下来将会详细介绍这俩个属性的作用； state react通过调用setState（data，callback）这个方法，通过改变state的值来控制用户界面的改变，用户界面会随着state的变化而重新渲染，渲染结束后会调用callback方法进行回调，callback回调可有可无...
React之Props，及与state的区别
张培跃的个人博客
08-28 1969
在之前关于组件的文章当中已经对Props有所涉及！而本篇文章主要是对Props进行更加全面介绍！以及总结props与state的区别！ 组件内可以通过props来获得属性值，看下面的实例先来回顾 一下Props最基本的使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
React 疑难点-Props和State的区别
花不掉泪的博客
07-28 8992
React 疑难点-Props和State的区别从一开始学习React或者React-Native就对 props和state有着很大的疑惑，它们之间究竟有什么区别？又该怎么使用它们呢？ props:props是一个组件的设置参数，可以在父控件中选择性设置。父组件对子控件的props进行赋值，并且props的值不可改变。一个子控件自身不能改变自己的 props。 state:当一个组件 mounts
React中Props 和 State用法
weixin_30674525的博客
05-24 101
React中Props 和 State用法 1.本质 　　一句话概括，props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件...
reactjs中props和state最佳实践
热门推荐
dangnian的博客
03-28 1万+
reactjs中props和state最佳实践 翻译文章：ReactJS Props vs State Best Practices props & state的误用产生的bug，花费了我们大量的修复时间。在一个app中如果包含有成百不可见的危险代码，对我们的应用将是非常危险和头痛的事情。 这篇文章中，你将明白这些不可预知的行为产生的原因，这样在编程中出错将变得非常困难。这也可以用来解决我们其
React中props和state区别
chuanxincui的博客
06-29 2055
props 主要是用于组件之间传递参数，获取组件的属性值。 组件之间数据单向流动 ，从父组件流向子组件。 对于外界/父组件的属性值，无法直接修改，它是只读的。states 主要用于组件更新控制，如果想重新渲染或更新组件，只需要修改state即可，然后根据具体修改的state,重新渲染用户界面（无需操作DOM对象）；本组件内的数据   相对封闭的单元/结构的数据例如 创建了 LikeBut...
React中的props和state
厚积薄发
11-27 1084
props意为属性，只可父组件改变子组件的props，而子组件不能自更新，props是子组件暴露给外部的公有接口state意为状态，所谓的状态就是一种标记，设计用来控制某种逻辑，类似于后台语言中的flag，全局的私有变量，外部不能访问，state的改变会被render()函数自动捕捉到，当然state改变后是否执行render，还取决于bool shouldComponentUpdate(nextP
react中props和state属性
米老头
06-20 648
1.props,通过this.props我们可以拿到组件使用时的属性。 var HelloWorld = React.createClass({ render: function () { return ( {this.props.content} ) } }); React.render( , docum
react中props和state的区别
06-28
React中，props和state是两种不同的数据类型。 props（properties）是父组件传给子组件的数据，子组件只能读取这些数据，不能修改。 state（状态）是组件自身维护的数据，组件可以读取并修改这些数据。 简单来说...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值