三個重要概念點(diǎn)
- 組件 return()的返回節(jié)點(diǎn)必須是一個，所以有多個節(jié)點(diǎn)時，用一個大節(jié)點(diǎn)包起
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component{
render(){
return (
<div> #用 div 包起多個節(jié)點(diǎn)
<ComponentHeader />
<h2>頁面的主體內(nèi)容</h2>
</div>
);
}
}
- 可以給外部使用的組件要加上
export default
import React from 'react';
import ReactDOM from 'react-dom';
#這個組件要供給 Index 組件使用，所以加上export default
export default class ComponentHeader extends React.Component{
render(){
return (
<header>
<h1>這里是頭部</h1>
</header>
);
}
}
- 入口定義：
ReactDOM.render(<Index/>, document.getElementById('example'),輸出給 html 的最終入口點(diǎn)
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component{
render(){
return (
<div>
<ComponentHeader />
<h2>頁面的主體內(nèi)容</h2>
</div>
);
}
}
ReactDOM.render(<Index/>, document.getElementById('example'));
多組件嵌套
-組件可以以參數(shù)的形式傳遞
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/BodyIndex';
class Index extends React.Component{
render(){
var component; #這里模擬了用戶登錄的情況，以判斷結(jié)果選擇不同的組件進(jìn)行傳入粥庄。
if(用戶已登錄) {
component = <ComponentLoginHeader />
}
else {
component = <ComponentHeader />
}
return (
<div>
{component}
<BodyIndex />
<ComponentFooter />
</div>
);
}
}
ReactDOM.render(<Index/>, document.getElementById('example'));
JSX內(nèi)置表達(dá)式(更多去看文檔)
- 使用三元表達(dá)式進(jìn)行判斷
下例中的：{userName == '' ? ' 用戶沒有登錄' : '用戶名： ' + userName}用?判斷 boolean 值，用:的前后來執(zhí)行判斷 - 標(biāo)簽屬性的表達(dá)式
下例中的：<input type='button' value = {userName} disabled={boolInput}></input>,表達(dá)式可以不用引號包裹 - 注釋的寫法
{/* 注釋 */}
import React from 'react';
import ReactDOM from 'react-dom';
export default class BodyIndex extends React.Component{
render(){
var userName = "emilesu";
var boolInput = false;
return (
<div>
<h2>這里是主體內(nèi)容</h2>
<p>{userName == '' ? '用戶沒有登錄' : '用戶名: ' + userName }</p>
<p><input type='button' value = {userName} disabled={boolInput}></input></p>
{/*
1.這里是注釋
2.這里是注釋
3.這里是注釋
*/}
</div>
);
}
}
生命周期函數(shù)
生命周期函數(shù)的作用豺妓，是在組件起始過程的不同階段內(nèi)惜互，可以通過調(diào)用生命周期函數(shù)，插入響應(yīng)不同的動作琳拭。
image.png
