一轻专、元素
React 的最小單位是元素，一旦創(chuàng)建察蹲，其子元素请垛、屬性等都無法更改。
// 假設 HTML 文件中有個元素：
<div id="root"></div>
// 創(chuàng)建element元素洽议，傳遞給React渲染宗收，并加載到父容器(id=root)下
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
二、組件
組件是有多個元素組成亚兄，可以分為 class組件 和 函數(shù)組件 混稽。
1、class組件
// class組件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
2儿捧、函數(shù)組件
// 普通函數(shù) 寫 函數(shù)組件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 箭頭函數(shù) 寫 函數(shù)組件
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
}
3荚坞、組件復用
// 組件App多次復用Welcome
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
4挑宠、動態(tài)構建組件
根據(jù)條件菲盾，創(chuàng)建不同組件。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
5各淀、map遍歷構建元素
// 用數(shù)組動態(tài)構建組件
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
三懒鉴、組件的屬性及方法
詳情，看這里!
