浅谈React之状态(State)

2024-08-22 02:06:44

在React当中，当你更新组件的state，然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机（State Machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数据始终保持一致。

如何定义State

定义一个合适的State，是正确创建组件的第一步。State必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变，都可以从State的变化中反映出来；同时，State还必须是代表一个组件UI呈现的最小状态集，即State中的所有状态都是用于反映组件UI的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。

组件中用到的一个变量是不是应该作为组件State，可以通过下面的4条依据进行判断：

1.这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。

2.这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。

3.这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。

4.这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer。

如果对状态不好理解的朋友，你可以认为状态即是数据！

State 与 Props 区别

props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对外接口props 和对内接口state，组件计算出对应界面的UI。

主要区别：

State是可变的，是一组用于反映组件UI变化的状态集合；
而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态

现在我们先来通过ES6类React.Component完成一个通过点击按钮对DIV进行显示与隐藏的操作，效果如下：

咱们先将页面进行初始化：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #myDiv{
      width:200px;
      height:400px;
      background:red;
      color:yellow;
      border:1px solid green;
    }
  </style>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
  <div id="wrap"></div>
</body>
<script type="text/babel">
  class MyComponent extends React.Component{
    constructor(props){
      super(props);
      // 为当前状态添加isShow属性
      this.state={
        // 值为true显示，false为隐藏。默认值为true。
        isShow:true
      }
    }
    render(){
      //返回组件的初始内容
      return <div>
        <input type="button" value="显示与隐藏"/>
        <div id="myDiv">我在这里呀！</div>
      </div>
    }
  }
  ReactDOM.render(
    <MyComponent/>,
    document.querySelector("#wrap")
  )
</script>
</html>

到目前为止，页面已经初始化完毕了。在上面的代码中为state添加了一个默认值为true的属性isShow。isShow用来控制div的显示与隐藏！当isShow为true时显示，为false时隐藏

接下来要完成的二件事。

第一件事是要为按钮增加一个点击事件，事件与changeState方法进行绑定。当点击按钮时改变isShow的状态，也就是要为 isShow进行取反操作。

注意：

1、onClick中的c要大写。
2、onClick后跟的方法不要用引号包裹，而是用{}
3、在ES6的class中React是不会自动绑定this的，所以需要自己通过bind绑定。
4、changeState方法中，不能直接修改isShow的值，而是需要借助setState方法来进行设置。

第二件事是要为id为myDiv的DIV增加一个style属性，该属性要根据isShow的状态来对DIV进行显示与隐藏

注意：

1、style的值不要用双引号，而是用{}，否则会报错

最终版代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #myDiv{
      width:200px;
      height:400px;
      background:red;
      color:yellow;
      border:1px solid green;
    }
  </style>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
  class MyComponent extends React.Component{
    constructor(props){
      super(props);
      // 为当前状态添加isShow属性
      this.state={
        // 值为true显示，false为隐藏。默认值为true。
        isShow:true
      }
    }
    changeState(){
      //此处不能直接修改isShow的值。而是需要借助setState方法！
      this.setState({
        //取反操作
        isShow:!this.state.isShow
      });
    }
    render(){
      //返回组件的初始内容
      return <div>
        {/*在ES6的class中React是不会自动绑定this的，所以需要自己绑定*/}
        <input type="button" value="显示与隐藏" onClick={this.changeState.bind(this)} />
        <div id="myDiv" style={{display:this.state.isShow?'block':'none'}}>
          我在这里呀！
        </div>
      </div>
    }
  }
  ReactDOM.render(
    <MyComponent/>,
    document.querySelector("#wrap")
  )
</script>
</html>

由上面的示例可以发现，当你改变isShow的状态时，div也会发生相对应的变化！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

React 无状态组件(Stateless Component) 与高阶组件

无状态组件(Stateless Component) 是 React 0.14 之后推出的,大大增强了编写 React 组件的方便性,也提升了整体的渲染性能. 无状态组件 (Stateless Component) function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Se
详解在React中跨组件分发状态的三种方法

当我问自己第一百次时,我正在研究一个典型的CRUD屏幕:"我应该将状态保留在这个组件中还是将其移动到父组件?". 如果需要对子组件的状态进行轻微控制.您可能也遇到了同样的问题. 让我们通过一个简单的例子和三种修复方法来回顾它.前两种方法是常见的做法,第三种方法不太常规. 问题: 为了向您展示我的意思,我将使用一个简单的书籍CRUD(译者注:增加(Create).读取查询(Retrieve).更新(Update)和删除(Delete))屏幕(如此简单,它没有创建和删除操作). 我们有
浅谈React 属性和状态的一些总结

一.属性 1.第一种使用方法:键值对 <ClaaNameA name = "Tom" /> <ClaaNameA name = {Tom} /> <ClaaNameA name = {"Tom"} /> <ClaaNameA name = {[1,2,3]} />//数组 <ClaaNameA name = {FunctionNAme} /> //定义一个函数 2.第二种方法:三个点的展开对象形式 var
react-native android状态栏的实现

react-native 开发App的时候难免会遇到状态栏的,背景颜色和字体颜色与App内容页面,色调适配,间言之就是将状态栏颜色与App颜色一致,使用户界面更加整体. 1.android设备系统元素导航栏:就是设备顶部的网络.时间.电量等信息栏 ActionBar: 返回按钮以及系统默认的header区域,RN开发中一般不会用到,RN中在navigation中进行定制导航栏: 设备下方的物理返回.回桌面.选择应用程序等系统导航栏 2.状态栏的呈现形式默认展示,一直显示手机系统的状态栏透
浅谈React之状态(State)

在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中.在这个时候不需要你操作任何DOM.你也可以认为组件在React当中是一个状态机(State Machines).当用户进行操作时会实现不同的状态,然后再渲染到你的页面中,让你的页面与数据始终保持一致. 如何定义State 定义一个合适的State,是正确创建组件的第一步.State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来:同时,State还必须是代表一个组件
浅谈react.js中实现tab吸顶效果的问题

在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam
浅谈react+es6+webpack的基础配置

这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac
浅谈react受控组件与非受控组件(小结)

我们都知道,有许多的web组件可以被用户的交互发生改变,比如:<input>,<select>,或者是我现在正在使用的富文本编辑器.这些组件在日常的开发中很不显眼,我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值.但是,因为React是单向数据流绑定的,这些组件可能会变得失控: 1.一个维护它自己state里的value值的<Input>组件无法从外部被修改: 2.一个通过props来设置value值的<Input>组件只能通过外部
浅谈React中组件逻辑复用的那些事儿

基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码.那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获.如果你对这些内容已经非常清楚,那么略过本文即可. 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,欢迎在评论区指正. 1. Mixins Mixins 事实上是 React.createClass 的产物了.当然,如果你曾经在低版本的 react 中使用过 Mixins,
浅谈React Router关于history的那些事

如果你想理解React Router,那么应该先理解history.更确切地说,是history这个为React Router提供核心功能的包.它能轻松地在客户端为项目添加基于location的导航,这种对于单页应用至关重要的功能. npm install --save history 存在三类history,分别时browser,hash,与 memory.history包提供每种history的创建方法. import { createBrowserHistory, createHashHi
浅谈React Component生命周期函数

React组件有哪些生命周期函数?类组件才有的生命周期函数,包括ES6语法的class以及create-react-class模块: 分为几个阶段:挂载,更新,卸载,错误处理: 1,挂载:constructor(常用).static getDerivedStateFromProps.render(常用).componentDidMount(常用) constructor是类组件的构造函数,在这可以初始化组件的state或进行方法绑定如:constructor(props){ super(prop
浅谈react 16.8版本新特性以及对react开发的影响

目录 react16.8版本更新 useEffect react16.8版本更新解决了什么问题组件复用更便捷 hooks和reactdiff算法总结 Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React.creactClass创建组件,之后在ES6推出之后,使用类组件Class构建包含生命周期的组件. react 16.8版本更新 react16
浅谈react.js 之批量添加与删除功能

最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮添加按钮的事件被添加组件存放的容器做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的 deleteType(),它是调用删除index数量的方法 removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把

浅谈React之状态(State)

相关推荐

随机推荐