参考:
.person:标签
person__hand{}: 子元素
person--female:表示状态
实例:
目录:
d:\shen\front\tianshu-web\src (master)
λ ls
App.css App.js App.test.js clock demo1.js index.css index.js list logo.svg serviceWorker.js
css定义:
.App {
text-align: center;
}
.App__logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App__header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
引用
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
{/* App__header: app的子元素 */}
{/* App__header--active: app的子元素的状态 */}
<header className="App__header--active">
<img src={logo} className="App__logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
组件化管理:
例子:
import React, { Component } from "react";
class List extends Component {
render() {
// 变量定义
const array = ["a", "b", "c", "d"];
const nodes = [<div>a</div>, <div>b</div>];
const str = "a";
// obj类型不能直接渲染
const obj = { a: 1, b: 2 };
return (
<div>
List:
<h3>array</h3>
{
array.map((item, index) => {
if (index % 2 ==0) {
return <div>{item}</div>;
}
})
}
<h3>nodes</h3>
{
nodes.map(item => {
return item
})
}
<h3>str</h3>
{
<div>{str}</div>
}
<h3>obj</h3>
{
console.log(<div>{obj}</div>)
}
</div>
);
}
}
export default List;
虚拟DOM
编译JSX成JS
标签变化:删除--->插入
组件变化:删除--->插入
Tree-Diff
【课后思考题】2.1.2 虚拟DOM和JSX
【题目1】什么是JSX,为什么浏览器无法读取JSX?
【题目2】你是如何理解Virtual DOM的原理的?
【题目3】React 中 key 是做什么的?
https://react-1251415695.cos-website.ap-chengdu.myqcloud.com/docs/introducing-jsx.html