React Doc 簡單摘要 (二)

2021-08-08 14:02:52 字數 1357 閱讀 1269

這是前面文件中例子:

function

tick

() .h2>

div>

);reactdom.render(

element,

document.getelementbyid('root');

);}setinterval(tick, 1000);

把這個例子包裝成乙個名為 clock 的 component,這個 component 會顯示時間並每隔一秒鐘更新一次。

function

clock

(props) .h2>

div>

);}function tick() />,

document.getelementbyid('root')

);}setinterval(tick, 1000);

但包裝之後,它的封裝性並不好。我們希望這個 component 可以這樣使用:

reactdom.render(

,document.getelementbyid('root')

);

為了實現乙個可以這樣使用的 component, 我們需要給 clock 加上 state。state 和 props 類似,但是它是 component 私有的,並且完全被它控制。另外,component 使用 class 來定義,才能夠使用 state。

需要建立乙個 es6 class, 並且是繼承 react.component 的。同時需要實現乙個 render 方法。

class clock extends react.component .h2>

div>);}

}

class clock extends react.component ;

}render() .h2>

div>);}

}reactdom.render(

,document.getelementbyid('root')

);

class clock extends react.component ;

}componentdidmount()

componentwillunmount()

tick() );

}render() .h2>

div>);}

}reactdom.render(

,document.getelementbyid('root')

);

component 是樹狀結構,父節點向子節點傳遞資料,所以說資料是往下流動的。

C語言簡單摘要

各位親 有時間可以去看看我的 金駿家居 店 買時說明在我的部落格看到有優惠哦 還有意外禮品贈送 真正的程式設計師 店 c語言總結 1 語言簡潔,使用方便靈活 c語言是現有程式語言中規模最小的語言之一,而小的語言體系往往能設計出較好的程式。c語言的關鍵字很少,ansi c標準一共只有32個關鍵字,9種...

初學php摘要 二

1。變數的賦值 vall one 你好,vall two vall one vall two.朋友 echo 第乙個變數 vall one echo 第二個變數 vall two 第三行 中變數 var two通過引用賦值到了變數 var one的記憶體位址,所以在第5行改變 var two的值的時...

pandas學習摘要二

時間序列 按照列索引合併 in 16 df1 pd.dataframe np.ones 2,4 index a b columns list abcd in 17 df1 out 17 a b c d a 1.0 1.0 1.0 1.0 b 1.0 1.0 1.0 1.0 in 18 df2 pd....