React 學習筆記一 DOM

阿新 • • 發佈：2020-12-16

本文需要結合官網學習指南學習

編者:由於官方文件翻譯機械,不符合國人思維再此用我們的描述表示一遍降低學習成本

學習材料

檔案 index.js。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'zhou',
  lastName: 'he'
};

const element = (
  <h1> 

    Hello, {formatName(user)}!
  </h1>
);
//顯示到HTML中 id='root'的位置
ReactDOM.render(
  element,
  document.getElementById('root')
);

你也可以在原有HTML檔案中新增新的東西

例如新增id=“tick” index.html的內容,我設定的功能是顯示時間。

<div id="tick"></div>

問顯示程式與後臺程式如何互動呢?

答:就是通過特定的id關聯,在id出插入顯示

ReactDOM.render()括號裡面就是插入的內容(這個內容符合特定的格式這裡的格式是React的,如果是其他框架就有其他的格式)

index.js中新增

function tick() {
  const element = (
    <div>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('tick'));
}

setInterval(tick, 1000);

官方文件中

讓我們來回顧一下這個例子中發生了什麼：

1.我們呼叫 ReactDOM.render() 函式，並傳入 < 
Welcome name="Sara" /> 
作為引數。
2.React 呼叫 Welcome 元件，並將 {name: 'Sara'} 作為 props 傳入。
3.Welcome 元件將 <h1>Hello, Sara</h1> 元素作為返回值。
4.React DOM 將 DOM 高效地更新為 <h1>Hello, Sara</h1>。

簡要描述就是使用index.js中函式的方式

const element = <Welcome name="Sara" />; 
Welcome 是函式名,name是輸入引數

(不知道為什麼用起來一股Python味兒,這也是指令碼語言思維的一個走向吧)

可以多次呼叫,也可以有多個變數輸入,呼叫方式較為靈活
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />

官方採用的是一個顯示評論條的例子

在這裡插入圖片描述

Hello Kitty
I hope you enjoy learning React!
2020/12/14

這裡的
<Avatar user={props.author} />
等價替換就是
<img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
文件中描述的就是React特定的格式的使用方法我沒有技術在裡面

下面的是結果直接貼上在index.js中就是上面的例子其實就更直觀一些,
自己的程式碼用這樣的格式寫別人也能輕易看懂
function formatDate(date) {
  return date.toLocaleDateString();
}

function Avatar(props) {
  return (
    <img
      className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">{props.user.name}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);

Props 的只讀性

意思就是函式輸入變數只讀,用的時候當作常量來用的不能改

State & 生命週期

setInterval(tick, 1000);按1000ms也就是1s的週期反覆讀取這個函式重新整理UI

html檔案新增
<div id="time"></div>
js檔案新增
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('time')
  );
}

setInterval(tick, 1000);

下面的就是不用setInterval函式一直重新整理UI的方式 ,而是自動更新
(不太明白文件的描述)
如果要自動更新就要跟著這個方式定義函式

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

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

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