课程进度 78% · 第16/20章第16/20章 · 标签 1/2
— 1 —
React简介
React是用于构建用户界面的JavaScript库，核心思想是声明式UI、组件化开发、单向数据流。
- 声明式UI：用JSX描述界面，状态驱动视图。
- 组件化开发：UI拆分为可复用组件。
- 单向数据流：数据自上而下流动，易于维护。
jsx
1
// 最简单的React组件
2
function Hello() {
3
return <h1>Hello, React!</h1>;
4
}
组件开发
函数组件：
jsx
1
function Welcome(props) {
2
return <h2>你好, {props.name}</h2>;
3
}
类组件：
jsx
1
class Welcome extends React.Component {
2
render() {
3
return <h2>你好, {this.props.name}</h2>;
4
}
5
}
state与事件处理：
jsx
1
function Counter() {
2
const [count, setCount] = React.useState(0);
3
return <button onClick={() => setCount(count + 1)}>{count}</button>;
4
}
— 2 —
JSX与渲染
JSX是JS的语法扩展，可嵌入表达式、条件、列表渲染。
jsx
1
// 条件渲染
2
function Greet({ isLogin }) {
3
return isLogin ? <span>欢迎回来</span> : <a href="/login">请登录</a>;
4
}
jsx
1
// 列表渲染
2
function List({ items }) {
3
return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
4
}
组件通信
props传递：
jsx
1
function Parent() {
2
return <Child msg="hello" />;
3
}
4
function Child({ msg }) {
5
return <span>{msg}</span>;
6
}
回调与状态提升：
jsx
1
function Parent() {
2
const [val, setVal] = React.useState('');
3
return <Child onChange={setVal} />;
4
}
5
function Child({ onChange }) {
6
return <input onChange={e => onChange(e.target.value)} />;
7
}
Context跨层通信：
jsx
1
const ThemeContext = React.createContext('light');
2
function App() {
3
return <ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>;
4
}
5
function Toolbar() {
6
return <ThemeContext.Consumer>{v => <div>主题:{v}</div>}</ThemeContext.Consumer>;
7
}
组件JSXpropsContext声明式