元件從概念上看就像是函式，它可以接收任意的輸入值（稱之為「props」），並返回乙個需要在頁面上展示的react元素。
class
welcome
extends
react.component
}
class
welcome
extends
react.component
}const element = "sara" />;
reactdom.render(
element,
document.getelementbyid('root')
);
我們對元素呼叫了reactdom.render()方法。
react將作為props傳入並呼叫welcome元件。
welcome元件將
);}function
tick
() />,
document.getelementbyid('root')
);}setinterval(tick, 1000);
我們會通過3個步驟將 date 從屬性移動到狀態中：
class
clock
extends
react.component
}
class
clock
extends
react.component ;
} render()
}
reactdom.render(
,document.getelementbyid('root')
);
class
clock
extends
react.component ;
} componentdidmount()
componentwillunmount()
tick() );
} render()
}reactdom.render(
, document.getelementbyid('root')
);
關於 setstate() 這裡有四件事情需要知道
// wrong
this.state.comment = 'hello';
// correct
this.setstate();
// wrong
this.setstate();
// correct
this.setstate((prevstate, props) => ());
mounting(裝載)
當元件例項被建立並將其插入 dom 時，這些方法將被呼叫：
constructor()
componentwillmount()
render()
componentdidmount()
updating(更新)
改變 props 或 state 可以觸發更新事件。 在重新渲染元件時，這些方法將被呼叫：
componentwillreceiveprops()
shouldcomponentupdate()
componentwillupdate()
render()
componentdidupdate()
unmounting(解除安裝)
當乙個元件從 dom 中刪除時，這個方法將被呼叫：
componentwillunmount()
其他 apis
每個元件還提供了一些其他 api：
setstate()
forceupdate()
類屬性
defaultprops
displayname
例項屬性
props
state
React 基礎 元件 傳值
npm start 元件 建立 在js檔案中書寫 import react from react 必須匯入react 且首字母要大寫 function tab export default tab也可以使用下面這種方法 import react from react class btnextends...
react 的高階元件（基礎篇）
乙個高階元件只是乙個包裝了另外乙個 react 元件的react 元件。這種形式通常實現為乙個函式，本質上是乙個類工廠 class factory 它下方的函式標籤偽 啟發自 haskell hocfactory w react.component e react.component定義中的 包裝 ...
React基礎 元件的拆分，父子元件之間訊息的傳遞
但是在實際工作中肯定是團隊開發，我們會把乙個大功能分成不同的元件。今天要學習的內容是，元件的拆分，與父子元件間，訊息的傳遞。1.父元件向子元件傳遞內容，靠屬性的形式傳遞。2.react有明確規定，子元件是不能操作父元件裡的資料的，所以需要借助乙個父元件的方法，來修改父元件的內容 3.如果子元件要呼叫...