React状态例子-计算器

React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
计算器：

class Cont extends React.Component{constructor(props){super(props)//组件内部的状态管理//数据是可以引发页面响应的this.state={num:'',text:''}  }getTextFun(e){this.setState({text: +e.target.value})}getNumFun(){this.setState({num:this.props.number+this.state.text})}render(){return <div><span>{this.props.number}</span><span>+</span><input  onChange={(e)=>{this.getTextFun(e)}} type="text"/><button onClick={()=>{this.getNumFun()}}>=</button><span>{this.state.num}</span></div>}
}let root = document.querySelector('#root');ReactDOM.render(<Cont number={10}/>,root)

效果图

React状态例子-计算器相关推荐

[译] ⚛ React 状态管理工具博物馆
原文地址:⚛ The React State Museum: ⚡️View the hottest state management libs for React 原文作者:Gant Laborde ...
React 状态管理库: Mobx
React 是一个专注于视图层的库.React 维护了状态到视图的映射关系,开发者只需关心状态即可,由 React 来操控视图. 在小型应用中,单独使用 React 是没什么问题的.但在复杂应用中,容 ...
解决react状态管理---React Query
什么是React Query react-query是一个适用于react hooks的请求库,它可以为任何类型的异步数据提供React状态管理功能,使React中的获取.缓存.同步和更新服务器数据变 ...
简洁的 React 状态管理库 - Stamen
说到 React 状态管理,必提的肯定是 Redux 与 MobX,2018 年快过去了,它们依然是最火热的状态管理工具,也有一些基于 Redux 的,如 dva.rematch 等,也有新的,如 m ...
uiswitchbutton 点击不改变状态_Redux 包教包会（一）：解救 React 状态危机
前端应用的状态管理日益复杂.随着大前端时代的到来,前端愈来愈注重处理逻辑,而不只是专注 UI 层面的改进,而以 React 为代表的前端框架的出现,大大简化了我们编写 UI 界面的复杂度.虽然 Rea ...
React - 状态提升
从入门的角度来聊一下React 的状态提升. 我们先来看一下React官网是怎么介绍这一概念的: 使用 react 经常会遇到几个组件需要共用状态数据的情况.这种情况下,我们最好将这部分共享的状态提升 ...
react销毁方法钩子0_React钩子：使用React状态的新方法
react销毁方法钩子0 Updated: With React 16.8, React Hooks are available in a stable release! 更新:随着React 16. ...
[react] 状态管理器它精髓是什么？
[react] 状态管理器它精髓是什么? 统一的数据管理个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[react] 状态管理器解决了什么问题？什么时候用状态管理器？
[react] 状态管理器解决了什么问题?什么时候用状态管理器? 专注 view 层 React 官网是这么简介的.JavaScript library for building user inter ...

React状态例子-计算器

React State(状态)

React状态例子-计算器相关推荐

最新文章

热门文章