【15】前端实习：react官方文档练习（定时器/ 组件的拆分与使用/ 子组件向父组件传值/react的状态与生命周期）

【1】

【2】子组件向父组件传值

父组件：App.js

子组件: Child.js

默认情况下，React DOM 在渲染之前会转义 JSX中嵌入的任何值。因此，它确保您永远不会注入未在应用程序中明确写入的任何内容。在渲染之前，所有内容都会转换为字符串。这有助于防止XSS（跨站点脚本）攻击。

 

【3】定时开启时钟

【4】组件（javascript 以及 ES6来定义组件）

【5】元素也表示用户定义的组件

 

【6】单页定义组件

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 定义常量 message
const message ={
  date: new Date(),
  user:{
    imgUrl:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2202924937,2953206766&fm=26&gp=0.jpg",
    imgdes:"这是一个小猫"
  }
}

// 定义一个comment的组件
function Comment(props) {
  return (
    <div>
      <div>
        <img src={props.user.imgUrl} alt={props.user.imgdes}></img>
      </div>
      <div>
        <ul>
          <li>{props.text}</li>
          <li>{props.text}</li>
          <li>{props.text}</li>
        </ul>
      </div>
      <div>
        {/* 使用props.date可以取得定义在message常量里的date的值 */}
        {getNowDate(props.date)}
      </div>
    </div>
  )
}

function getNowDate(date){
  return date.toLocaleDateString();
}

ReactDOM.render(
  <Comment
    date={message.date}
    text="this is text"
    user={message.user}
  ></Comment>,
  document.getElementById('root')
  );


serviceWorker.unregister();

继续拆分组件：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 定义常量 message
const message ={
  date: new Date(),
  user:{
    imgUrl:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2202924937,2953206766&fm=26&gp=0.jpg",
    imgdes:"这是一个小猫"
  }
}


//将图片拆分成组件
function Cat(props) {
  return (
  <div>
    <img src={props.user.imgUrl} alt={props.user.imgdes}></img>
  </div>
  )
}

//将列表拆分成组件
function List(props) {
  return (
    <div>
      <ul>
        <li>{props.text}</li>
        <li>{props.text}</li>
        <li>{props.text}</li>
      </ul>
    </div>
  )
}

// 定义一个comment的组件
function Comment(props) {
  return (
    <div>
      <Cat user={props.user}></Cat>
      <List text="这是可爱的小猫"></List>
      <div>
        {/* 使用props.date可以取得定义在message常量里的date的值 */}
        {getNowDate(props.date)}
      </div>
    </div>
  )
}

function getNowDate(date){
  return date.toLocaleDateString();
}

ReactDOM.render(
  <Comment
    date={message.date}
    user={message.user}
  ></Comment>,
  document.getElementById('root')
  );


serviceWorker.unregister();

 

【7】react的状态与生命周期

********************TIP*****************

• setTimeout用于延迟执行某方法或功能
• setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同

********************TIP*****************

一个实时刷新的定时器：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

function Clock(props) {
  return (
    <div>
      <text>这是一个时钟</text>
      <h2>现在是{new Date().toLocaleTimeString()}</h2>
    </div>
  )
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()}></Clock>,
    document.getElementById('root')
  )
}
//实现实时刷新功能，1秒刷新一次
setInterval(tick,1000)


serviceWorker.unregister();

将函数转换为类

 

将生命周期方法添加到类中

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  //在加载完Dom节点后渲染组件
  componentDidMount() {
    //设置定时器，做到实时刷新
    this.timerID = setInterval(
      () => {this.tick()},
      1000
    );
  }

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

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

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

serviceWorker.unregister();