react的官方文件

NO IMAGE

最近在看react的文件

我覺得有助於其他的開發理解

文件地址:

http://www.css88.com/react/docs/components-and-props.html

在文件中藥注意的一些規則

propos的概念

 

元件名大寫

元件必須是純函式

類組價的表現形式:

class Clock extends React.Component {

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.props.date.toLocaleTimeString()}.</h2>

</div>

);

}

}

所謂的生命週期

基本是同vue中的的生命週期是一致的

關於狀態的問題:

改元件上的狀態,是不能被擁有並設定它的元件 以外的任何元件訪問。

一個元件可以選擇將 state(狀態) 向下傳遞,作為其子元件的 props(屬性):

即所謂的資料向下流動

關於繫結事件注意的

React事件繫結屬性的命名採用駝峰式寫法,而不是小寫。

關於this 的重新繫結:如果你忘記繫結 this.handleClick

;它是函式如何在 JavaScript 中執行的一部分。通常情況下,如果你沒有在方法後面新增 () ,例如 onClick={this.handleClick},你應該為這個方法繫結 this。

有個地方看不懂了

https://codepen.io/anon/pen/bjGopO?editors=0010

最後的{button}

關於大括號裡面的表示式問題:

JSX允許在大括號中嵌入任何表示式

這麼做有時可以使你的程式碼更清晰,但有時這種風格也會被濫用。就像在JavaScript中一樣,何時需要為了可讀性提取出一個變數,這完全取決於你。但請記住,如果一個map()巢狀了太多層級,那可能就是你提取出元件的一個好時機。

編輯本頁面

關於表單的事情:

<input type=”text”>, <textarea>, 和 <select> 都十分類似 – 他們都通過傳入一個value屬性來實現對元件的控制

例子:

<input type=”text” value={this.state.value} onChange={this.handleChange} />

<textarea value={this.state.value} onChange={this.handleChange} />

<select value={this.state.value} onChange={this.handleChange}>

<option value=”grapefruit”>Grapefruit</option>

<option value=”lime”>Lime</option>

<option value=”coconut”>Coconut</option>

<option value=”mango”>Mango</option>

</select>

狀態提升的概念:原則

在React中,狀態分享是通過將state資料提升至離需要這些資料的元件最近的父元件來完成的。這就是所謂的狀態提升