State&生命周期学习

到目前为止我们只学习了一种方法来更新UI。
我们调用 ReactDOM.render()方法来改变输出。
这一节,我们在前面的基础上,如何将之前的例子变成可重用的组件。
先回顾一下之前的方法:

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

理想情况下,Clock更细自己的UI应该是自己内部的事情,他能够自己更新自己的UI。
为了实现这个需求,我们需要为Clock组件添加状态
状态与属性十分相似,但是状态是私有的,完全受控于当前组件。

把函数变成类

1.创建一个名称扩展为 React.Component的ES6类
2.创建一个叫做render()的空方法
3.将函数体移动到 render()方法中
4.在 render()方法中,使用 this.props替换 props

export class Tick extends Component {
  constructor(props){
    super(props);
    this.state = {
      date:new Date()
    }
  }
  render() {
    return (
      <div>
        <h1>Hello,{this.props.name}</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

这里我是在自己本地运行的一个react的环境,在对应的文件写了一个组件。你们也可以在自己本地安装环境,这样学习起来也比较方便:

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

然后就可以开始了。
现在我们定义了一个类,使用类就允许我们使用其它特性,例如局部状态、生命周期钩子。
代码中,我们是使用构造函数的方法来初始化组件的状态以及传递props的。
建议大家在学习前还是了解一下的概念比较容易理解。

接下来我们为组件添加定时器,来更新时间。

将生命周期函数添加到类中

在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要。
每当组件第一次加载到DOM中的时候,这在React中被称为挂载
同样,每当组件生成的这个DOM被移除的时,这在React中被称为卸载。
我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码:

export class Tick extends Component {
  constructor(props){
    super(props);
    this.state = {
      date:new Date()
    }
  }
  componentDidMount() {
   
  }
  componentWillUnmount() {
   
  }
  render() {
    return (
      <div>
        <h1>Hello,{this.props.name}</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

这些方法被称作生命周期钩子。
当组件输出到 DOM 后会执行 componentDidMount()钩子,这是一个建立定时器的好地方:

componentDidMount() {
    this.timerId = setInterval(
      () => this.tick(),
      1000
    )
  }

注意我们如何在 this 中保存定时器ID。
虽然 this.props 由React本身设置以及this.state 具有特殊的含义,但如果需要存储不用于视觉输出的东西,则可以手动向类中添加其他字段。
如果你不在 render() 中使用某些东西,它就不应该在状态中。
我们将在 componentWillUnmount()生命周期钩子中卸载计时器:

componentWillUnmount() {
    clearInterval(this.timerID);
  }

更新组件局部状态

我们使用用 this.setState()来更新组件局部状态:

tick() {
    this.setState({
      date: new Date()
    })
  }

最后,我们实现了每秒钟执行的 tick() 方法。然后组件每一秒就会更新自己的状态。现在,现在时钟每秒钟都会执行。
关于 setState():

  • 不要直接更新状态,应当使用 setState()
  • 构造函数是唯一能够初始化 this.state 的地方。
  • 状态更新合并,这里的合并是浅合并,当你更新一个状态时,其余的状态保持不变。

数据单向流动

父组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类。
这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外,其它组件不可访问。
组件可以选择将其状态作为属性传递给其子组件,这也适用于用户定义的组件:

<FormattedDate date={this.state.date} />

FormattedDate 组件将在其属性中接收到 date 值,并且不知道它是来自父组件 状态、还是来自 父组件的属性、亦或手工输入:

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

这通常被称为自顶向下或单向数据流。
为了表明所有组件都是真正隔离的,我们可以创建一个 App 组件,它渲染三个Tick

export class App extends Component {
  render() {
    return (
      <div className="App">
        <Tick name="Zhang Yanwei"/>
        <Tick name="Zhang"/>
        <Tick name="Yanwei"/>
      </div>
    );
  }
}

每个 Tick建立自己的定时器并且独立更新。

效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 想一下上一节中那个滴答计时的例子。迄今为止,我们只学到一种更新UI的方法。我们通过调用ReactDOM.rende...
    莫铭阅读 530评论 0 0
  • 考虑之前的例子,我们只学会了一种方法去更新UI,我们调用ReactDOM.render()去改变输出渲染: 在这个...
    编码的哲哲阅读 599评论 0 0
  • React版本:15.4.2**翻译:xiyoki ** 考虑前一节中滴答作响的时钟的例子。到目前为止,我们只学习...
    前端xiyoki阅读 417评论 0 0
  • State 和生命周期 考虑前面章节中时钟的例子。 到目前位置,我们仅学习了一种更新 UI 的方式。 我们调用Re...
    soojade阅读 1,229评论 0 1
  • 我犹豫了很久要不要去篮球场。如果我到文化广场都没有下雨,我就去。明天陈先生生日了,虽然他可能忘了我的生日,但是05...
    隐遁阅读 296评论 0 0