React state和props使用场景
一个组件的显示状态可以由内部状态state、外部参数props所决定。
props:
1、props 是从外部传进组件的参数,主要是父组件向子组件传递数据。
2、props 对于使用它的组件来说是只读的。要想修改props,必须通过父组件修改。所以子组件的props 通常是父组件的state。
3、默认值
为了组件的健壮性,在传入props 的时候常给默认值。
const SubComponent=(props)=> {return (<h1>{props.name}</h1>)
}
SubComponent.defaultProps = {name: 'Rain_tdk'
};export default SubComponent
4、为开发方便我们需要对props 的数据类型进行检验
import PropTypes from 'prop-types';
const SubComponent=(props)=> {return (<h1>{props.name}</h1>)
}
SubComponent.defaultProps = {name: 'Rain_tdk'
};
SubComponent.propTypes = {name: PropTypes.string
};
export default SubComponent
更多检验参考 :https://www.jianshu.com/p/2896acb5746b
state:
1、state是React组件中的私有对象,用于控制这个组件本身的状态
2、setState()采用merge的方式修改state。setState会重新调用render()刷新UI,直接通过this.state=‘xxx’的方式也会修改state但是不会重新渲染。
注:setState({...newState})当state为Object、Arrary 时diff 比较的是引用,不会刷新UI 。需要使用 concat /slice /...运算符等产生新引用的方法。
3、应用场景:
大部分组件的工作应该是从props里取数并渲染出来,但是当需要 用户输入、服务器请求、延定时变化 等作出响应。
通常在有状态state的组件中处理用户交互逻辑,并通过props传递给子组件(通常为无状态组件)中。
4、那些属性应该用state
state 中应该保存可能被事件处理器改变并触发用户页面更新的数据。
5、哪些属性不应该存储在state中
5-1、计算所得数据。计算数据应该在render()中实现,如果存储在state中需要手动更新state 比较麻烦
5-2、基于props 的重复数据。组件中应该保持props为唯一的数据来源,除非需要知道历史数据是啥。
5-3、不要将React组件保存在state中。在render()里使用props、state来创建他。
总结:state让你修改(不修改的数据别往state存)。props不让你修改。多个state、props共同影响UI 的时在render()中实现。
转载于:https://www.cnblogs.com/web-Rain/p/10718621.html
React state和props使用场景相关推荐
- React.js 小书 Lesson12 - state vs props
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson12 转载请注 ...
- react中的state、props、ref
state state顾名思义就是状态,它只是用来控制这个组件本身自己的状态,我们可以用state来完成对行为的控制.数据的更新.界面的渲染,由于组件不能修改传入的props,所以需要记录自身的数据变 ...
- [react] react组件的state和props两者有什么区别?
[react] react组件的state和props两者有什么区别? State 是一种数据结构,用于组件挂载时所需数据的默认值.State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件 ...
- 前端框架--React props与React state
版权声明:本文为博主原创文章,未经博主允许不得转载. 二者区别 state 和props 主要的区别在于子组件通过props来传递数据,一旦外部传入数据后, props 不可改变. 而 state作为 ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- React中的state和props有什么区别?
本文翻译自:What is the difference between state and props in React? I was watching a Pluralsight course o ...
- react基础入门,类组件和函数组件,state,props,refs
React入门 目录 React入门 React入门 Vue跟React的异同点 相同点 不同点 Vue小建议 1. 不需要响应式的数据应该怎么处理? 2. Key 3. 数据结构 React 教程 ...
- React State和生命周期 3
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 一:组件的生命周期 组件的生命周期可分成三个状态: 安装:已插入真实DOM 更新:正在被重新渲染 卸载:已移出 ...
- React组件通信--props
React组件通信 1.props接收数据 //index.js import App from "./App";ReactDOM.render(<App name='传递数 ...
最新文章
- 配置bind主域名服务器
- html5 javascript 事件练习3键盘控制练习
- OVS 非VXLAN的收发包调用栈(二十二)
- 【XAuido2】播放wav和ogg格式音频文件
- swiper轮播器的常用案例分析(swiper hover停止mouseover停止)
- PAT (Advanced Level) 1002. A+B for Polynomials (25)
- Linux基础命令---findfs
- python是动态语言_Python是动态语言:动态添加或删除属性、方法
- 课程题目 : 1003. 简单字符串匹配
- github html5 预览,github 上如何直接预览仓库中的html
- 如何在Exchange 2013中禁用对ECP的外部访问
- PyQt5实现软键盘
- Microsoft Navision 4.0帮助您消除日常工作流程中的烦恼的7条途径
- it职位简称_IT行业的英文职位名称
- 常用的几个设计心理学
- 用计算机弹音乐的歌谱《奇迹再现》,奇迹再现曲谱_奇迹再现的歌谱
- 联通假4G欺骗消费者!
- 云南马铃薯种薯质量追溯系统
- WPF真入门教程02--新建WPF工程
- mysql存储用户昵称_mysql 微信用户昵称 emoji 完整保存 - 人人都是架构师
热门文章
- safari的调试工具
- go 中使用socket范例
- Discrete Logging hunnu10590 pku2417 fzu 1352 hit 1928 zoj 1898
- awk按ip统计日志数
- RocksDB 6.0.2 发布,Facebook 推出的存储系统
- 猪和兔子的玻璃体给人用(仅仅是个人想法)
- flink sql实现interval join的图解
- intellij默认maven仓库配置路径+默认New Project 工程路径
- Hive引擎改为Tez笔记
- TypeError at / __init__() takes exactly 1 argument (2 given)