【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();