资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React 手稿 - Component state

React 手稿 - Component state

dcr309duan / 803人阅读

摘要：实例在线实例定义写在函数中，是一个对象。一般情况下需要指定默认值，预防抛使用在组件中通过访问组件对象属性的方式。把这种组件也称为非受控性组件。通过提供了方法，来实现的修改。回调非控组件在线实例受控组件在线实例推荐阅读手稿

Component state

实例：

</>复制代码 
  1. import React, { PureComponent } from "react";
  2. export default class extends PureComponent {
  3.   constructor(props) {
  4.     super(props);
  5.     this.state = { time: "" };
  6.   }
  7.   componentDidMount() {
  8.     setInterval(() => {
  9.       const now = new Date();
  10.       let { time } = this.state;
  11.       const year = now.getFullYear();
  12.       const month = now.getMonth() + 1;
  13.       const day = now.getDate();
  14.       const hours = now.getHours();
  15.       const minutes = now.getMinutes();
  16.       const seconde = now.getSeconds();
  17.       time = `${`0000${year}`.slice(-4)}-${`00${month}`.slice(-2)}-${`00${day}`.slice(-2)} ${`00${hours}`.slice(-2)}:${`00${minutes}`.slice(-2)}:${`00${seconde}`.slice(-2)}`
  18.       this.setState({ time });
  19.     }, 1000);
  20.   }
  21.   render() {
  22.     return (
  23.       
    {this.state.time}
  24.     )
  25.   }
  26. }

Timer 在线实例

定义

写在constructor函数中，是一个Object对象。一般情况下需要指定默认值，预防抛undefined.

使用

在组件中通过访问组件对象属性的方式。直接获取：this.state.time.
我们通常会先获取state数据，再渲然到页面，例如：

</>复制代码 
  1.   render() {
  2.     const {time} = this.state;
  3.     return (
  4.       
    {time}
  5.     );
  6.   }
setState

先看一段代码：

</>复制代码 
  1. import React, {PureComponent} from "react";
  2. export default class extends PureComponent {
  3.   constructor(props) {
  4.     super(props);
  5.     this.state = {name: "world"};
  6.   }
  7.   render() {
  8.     const {name} = this.state;
  9.     return (
  10.       
  11.         
  12.         
    Holle, {name}!
  13.       
  14.     );
  15.   }
  16. }

数据单和向性

input与div中直接显示name的内容,但是，在input中直接输入内容，div的显示不会改变。

</>复制代码 
  1. 把这种组件也称为非受控性组件。

setState

通过React提供了setState方法，来实现state的修改。

我们只要将上述的非受控性组件修改为受控性组件即可，如下：

</>复制代码 
  1.   this.setState({name: e.target.value})} />

使用setState方法需要注意以下几点：

异步

</>复制代码 
  1. onChange () {
  2.   this.setState({name: "hasChanged"})
  3.   console.log(this.state.name === "hasChanged"); //false
  4. }

合并

</>复制代码 
  1.   this.state = {name: "xiaoshouyi", address: "beijing"};
  2.   this.setState({address: "xi an"});
  3.   //not
  4.   //this.setState({...this.state, addree: "xi an"});
  5.   //但是这种方式在对象修改的时候非常有用。
  6.   console.log(this.state) //{name: "xiaoshouyi", address: "xi an"}

类似与Object.assgin()。

回调

</>复制代码 
  1. this.setState({name: "changed"}, () => {
  2.   console.log(this.state.name); // changed
  3. });

非控组件 在线实例

受控组件 在线实例

推荐阅读《React 手稿》

GPU云服务器 云服务器 react-component Icon React Component 手稿 component

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99087.html

相关文章

  • React手稿之高阶组件

    摘要：示例使用场景代码复用类似版本之前的。多个组件同用一段代码，或者同样的方法时，可以使用。示例在线示例抽象和更改可以通过包裹的组件公共抽象出来。可以通过包裹的组件传递修改添加等的示例渲然劫持条件渲然。示例反向继承返回的高阶组件类继承了。 Higher-Order Components HOC 不是React的标准API。 HOC 是一个函数。 HOC 返回一个Component。 示例...

    dkzwm 评论0 收藏0

  • React手稿之 React-Saga

    摘要：相当于一个放置在与中的垫片。之所以称之谓副作用呢，就是为了不让触发一个时，立即执行。也就是在与之间做一个事情，比如异步获取数据等。使用了中的功能，避免了像的回调地狱。把放入中最后再实现相就的即可在线示例推荐阅读手稿 Redux-Saga redux-saga 是一个用于管理应用程序副作用（例如异步获取数据，访问浏览器缓存等）的javascript库，它的目标是让副作用管理更容易，执行更...

    notebin 评论0 收藏0

  • React手稿之State Hooks of Hooks

    摘要：官方也陈述，接下来的的工作会投入到中。从目前官方的文档可以看出，从以下四个方面来提高的编码。生命周期自定义方法的主要用途是替代之前版本的组件。说明到目前为止，在已发布的版本中有该功能，想体验该功能，必须安装。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前还是Proposal阶段。 官方也陈述，接下来的90%的工作会投入到React ...

    DC_er 评论0 收藏0

  • React.memo

    摘要：介绍之前，先了解一下和。不同是没有实现，而通过和的浅比较实现了。如果组件的和相同时，的内容也一致，那么就可以使用了这样可以提高组件的性能。例如当和中有复杂数据结果时，不好使用。示例这种方式依然是一种对象的浅比较，有复杂对象时无法。 介绍React.memo之前，先了解一下React.Component和React.PureComponent。 React.Component React...

    Meils 评论0 收藏0

  • React手稿之 React-Redux

    摘要：属性是必须的。需要一个与的一致。必须在的返回原。调试插件日志安装组件。然后加入到中即可例如扩展程序需要在应用市场安装然后在中使用增强功能将加入即可在线实例推荐阅读手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 属性是必须的。...

    Freelander 评论0 收藏0

发表评论

登陆后可评论

0条评论

dcr309duan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<