一、state

一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state,一般在 constructor 中初始化

当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用,并且重新调用组件render方法,如下面的例子:

class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
} updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
} render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
}

setState还可以接受第二个参数,它是一个函数,会在setState调用完成并且组件开始重新渲染时被调用,可以用来监听渲染是否完成

this.setState({
name:'JS每日一题'
},()=>console.log('setState finished'))

二、props

React的核心思想就是组件化思想,页面会被切分成一些独立的、可复用的组件

组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据

react具有单向数据流的特性,所以他的主要作用是从父组件向子组件中传递数据

props除了可以传字符串,数字,还可以传递对象,数组甚至是回调函数,如下:

class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
} const element = <Welcome name="Sara" onNameChanged={this.handleName} />;

上述name属性与onNameChanged方法都能在子组件的props变量中访问

在子组件中,props在内部不可变的,如果想要改变它看,只能通过外部组件传入新的props来重新渲染子组件,否则子组件的props和展示形式不会改变

三、区别

相同点:

  • 两者都是 JavaScript 对象
  • 两者都是用于保存信息
  • props 和 state 都能触发渲染更新

区别:

  • props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化
  • props 在组件内部是不可修改的,但 state 在组件内部可以进行修改
  • state 是多变的、可以修改

State 和 Props的理解以及区别的更多相关文章

  1. react基础语法(五) state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. React中的state与props的再理解

    props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...

  3. React中的State与Props

    一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.st ...

  4. React中state和props分别是什么?

    整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...

  5. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  6. React应用程序设计过程中如何区分模块到底是state还是props?

    根据官方文档,满足以下任意条件的模块,就不是State,原文如下: 1.Is it passed in from a parent via props? If so, it probably isn’ ...

  7. React.js 小书 Lesson12 - state vs props

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson12 转载请注明出处,保留原文链接和作者信息. 我们来一个关于 state 和 props 的 ...

  8. state vs props

    我们来一个关于 state 和 props 的总结. state 的主要作用是用于组件保存.控制.修改自己的可变状态.state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改.你可以 ...

  9. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

  10. React state和props使用场景

    一个组件的显示状态可以由内部状态state.外部参数props所决定. props: 1.props 是从外部传进组件的参数,主要是父组件向子组件传递数据. 2.props 对于使用它的组件来说是只读 ...

随机推荐

  1. 学习笔记:勒让德(Legendre)符号

    授课老师:ybx.chh. 授课时间:2024/3/8. 授课内容纲要:勒让德符号及其性质(欧拉准则,高斯引理,二次互反律). 勒让德符号概括 好像在 OI 和 MO 当中都挺有用的. 勒让德符号的定 ...

  2. ANDROID : NEW IDEA

    •前言 学习了 Android 开发后,小脑袋瓜中时不时会蹦跶出一些想法: 这些想法大都是我现在实现不了的,所以就需要记录一下,等学到相关知识时,在着手解决. •NEW IDEA 1 将一款 APP( ...

  3. [VueJsDev] 基础知识 - Node.js常用函数

    [VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html Node.js 常用函数 总结常用 node 函数 用的 E ...

  4. snipaste 替换 微信截图快捷键 F3贴图功能实在是太帅了 - 软件推荐

    snipaste 替换 微信截图快捷键 这个软件很久之前就知道,一直也没觉得可以替换微信的截图功能,毕竟能懒就懒. 今天同事又推荐 用了下,觉得确实ok. https://zh.snipaste.co ...

  5. Vue3 写业务逻辑不适合用TS(TypeScript)

    TypeScript 最重要的就是装饰器 Vue3最重要更新就是Setup 装饰器就是为了打散功能点,Vue3的Setup功能也是打散功能点,那用Vue3上TS,感觉就是自己给自己多一层工作量. 我这 ...

  6. UDP可靠传输协议KCP的一些理解

    UDP主要用在哪两个方面 游戏 音视频通话 为什么要使用UDP? 实时性的考虑,丢包重传,TCP协议栈重传无法控制,UDP重发可以自定义策略. 在DNS查询的时候,也使用UDP,对资源的考虑. 如何做 ...

  7. using用法总结

    一.命名空间的使用 不再赘述. 二.在子类中改变基类成员的访问权限 using可以将public和protected的基类成员的访问权限改为public.protected.private,注意,us ...

  8. 一个简单的RTMP服务器实现 --- RTMP实现要点

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  9. 使用SpringBatch读取csv文件

    目录 1.需求 2.解决方案 3.注意事项 1.文件路径的获取 2.各个Step如果获取到ExecutionContext中的值 3.FlatFileItemReader使用注意 4.实现步骤 1.导 ...

  10. LOTO示波器参加2023第101届中国(深圳)电子展

    西安乐拓精益信息科技有限公司,专注研发虚拟测量仪器,以虚拟示波器(USB示波器)以及相关衍生产品为主,包括信号发生器,逻辑分析仪等.乐拓科技以研发团队为核心,着力开发高性价比的示波器产品.无论您是资深 ...