zoukankan      html  css  js  c++  java
  • react篇章-React State(状态)-数据自顶向下流动

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    
    <div id="example"></div>
    <script type="text/babel">
    function FormattedDate(props) {
      return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
    }
    
    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }
    
      componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
    
      componentWillUnmount() {
        clearInterval(this.timerID);
      }
    
      tick() {
        this.setState({
          date: new Date()
        });
      }
    
      render() {
        return (
          <div>
            <h1>Hello, Zzw ReactState 数据自顶向下流动!</h1>
            <h2>父组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类。
    
    这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外,其它组件不可访问。
    
    以下实例中 FormattedDate 组件将在其属性中接收到 date 值,并且不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入:</h2>
            <FormattedDate date={this.state.date} />
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <Clock />,
      document.getElementById('example')
    );
    </script>
    
    </body>
    </html>

  • 相关阅读:
    Java8常用新特性实践
    Presto集群部署
    Exception: Unexpected End Of File(crontab)
    centos6环境下使用yum安装Ambari
    pyspark进行词频统计并返回topN
    七行代码开始flask
    hibernate初步4
    java四大域总结
    servlet中的转发和重定向问题
    一个web页面的访问的过程
  • 原文地址:https://www.cnblogs.com/zzzzw/p/10411542.html
Copyright © 2011-2022 走看看