React是什么?

用于构建用户界面的 JavaScript 库

1. JSX 简介

1.1 在 JSX 中嵌入表达式

声明变量 name，并包裹在大括号中

const name = 'world';
const element = <h1>Hello, {name}</h1>;

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式

1.2 JSX 中指定属性

可以使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={user.avatarUrl}></img>;

1.3 使用 JSX 指定子元素

JSX 标签里能够包含很多子元素:

const element = (<div><h1>Hello!</h1><h2>Good to see you here.</h2></div>
);

1.4 JSX 表示对象

const element = (<h1 className="greeting">Hello, world!</h1>
);

等效于：

const element = React.createElement('h1',{className: 'greeting'},'Hello, world!'
);

2. 元素渲染

2.1 将一个元素渲染为 DOM

页面根节点

<div id="root"></div>

将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入

const root = ReactDOM.createRoot(document.getElementById('root')
);const element = <h1>Hello, world</h1>;root.render(element);

3. 组件 & Props

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思

3.1 函数组件与class组件

注意：组件名称必须以大写字母开头

3.1.1 函数组件

接受任意的入参（即 “props”）

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

3.1.2 class组件

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

3.2 渲染组件 & props

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”

const element = <Welcome name="Sara" />;

子组件（children）例子：

<Welcome name="react"><span>children</span>
</Welcome>

最终props为

{name: 'react', children: {…}}

3.1 Props的只读性

组件无论是使用 函数声明还是通过 class 声明，都决不能修改自身的 props

纯函数：函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。
如：

function sum(a, b) {return a + b;
}

相反，下面这个则不是纯函数

function withdraw(account, amount) {account.total -= amount;
}

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

4. State & 生命周期

4.1 class 组件中的 state

class Clock extends React.Component {constructor(props) {super(props);this.state = {date: new Date()};}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.date.toLocaleTimeString()}.</h2></div>);}
}

4.2 class组件中的生命周期

componentDidMount：方法会在组件已经被渲染到 DOM 中后运行
componentWillUnmount：方法会在组件卸载前调用

class Clock extends React.Component {constructor(props) {super(props);this.state = {date: new Date()};}componentDidMount() {}componentWillUnmount() {}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.date.toLocaleTimeString()}.</h2></div>);}
}

4.3 正确使用State

4.3.1 不要直接修改 State

例如，此代码不会重新渲染组件：

// 错误
this.state.comment = 'Hello';

而是应该使用 setState():

// 正确
this.setState({comment: 'Hello'});

构造函数是唯一可以给 this.state 赋值的地方。

4.3.2 State 的更新可能是异步的

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。
因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。
比如：

// 错误
this.setState({counter: this.state.counter + this.props.increment,
});

解决这个问题：
可以让 setState() 接收一个函数而不是一个对象

// Correct
this.setState((state, props) => ({counter: state.counter + props.increment
}));

4.3.3 State 的更新会被合并

当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。

4.4 数据是向下流动的

5. 事件处理

5.1 基本使用

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

示例：

function MyButton() {function handleClick() {alert('You clicked me!');}return (<button onClick={handleClick}>Click me</button>);
}

5.2 class组件中的this问题

先来报错案例：
说明： JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定this

class Clock extends React.Component {constructor(props) {super(props);this.state = { message: 'hello' };}handleClick() {console.log(this) // 这里this为undefinedthis.setState({ message: '你好' })}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.message}</h2><button onClick={this.handleClick}>点击事件</button></div>);}
}

5.2.1 使用bind来解决this问题

为了在回调中使用 this，对this.handleClick.bind(this);这个绑定是必不可少的

class Clock extends React.Component {constructor(props) {super(props);this.state = { message: 'hello' };// 为了在回调中使用 `this`，这个绑定是必不可少的this.handleClick = this.handleClick.bind(this);}handleClick() {console.log(this)this.setState({ message: '你好' })}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.message}</h2><button onClick={this.handleClick}>点击事件</button></div>);}
}

5.2.2 使用类字段来解决this问题（常用）

class LoggingButton extends React.Component {// 此语法确保 `handleClick` 内的 `this` 已被绑定。handleClick = () => {console.log('this is:', this);}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}

5.2.3 回调中使用箭头函数解决this问题

class LoggingButton extends React.Component {handleClick() {console.log('this is:', this);}render() {// 此语法确保 `handleClick` 内的 `this` 已被绑定。return (<button onClick={() => this.handleClick()}>Click me</button>);}
}

5.3 向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

6. 条件渲染

6.1 if 语句进行条件渲染

function Greeting(props) {const isLoggedIn = props.isLoggedIn;if (isLoggedIn) {return <UserGreeting />;}return <GuestGreeting />;
}

6.2 与运算符 &&

render() {const count = 0;return (<div>{count && <h1>Messages: {count}</h1>}</div>);
}

6.3 三目运算符

render() {const isLoggedIn = this.state.isLoggedIn;return (<div>The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.</div>);
}

7. 列表 & Key

7.1 基础列表组件

使用 map 函数

function NumberList() {const numbers = [1, 2, 3, 4, 5];return (<ul>{numbers.map(item => {return <li>{item}</li>})}</ul>)
}

7.2 key

应当给数组中的每一个元素赋予一个确定的标识
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串，最好是用id
注意，最好不要用索引index作为key，有可能会导致一些问题

function NumberList() {const numbers = [1, 2, 3, 4, 5];return (<ul>{numbers.map(item => {return <li key={item.toString()}>{item}</li>})}</ul>)
}

8. 表单

8.1 受控组件

渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

class FormDemo extends React.Component {constructor(props) {super(props);this.state = {value: '',textAreaValue: '',selectValue: '',}}handleNameChange = (e) => {this.setState({ value: e.target.value })}handleTextAreaChange = (e) => {this.setState({ textAreaValue: e.target.value })}handleSelectChange = (e) => {this.setState({ selectValue: e.target.value })}handleSubmit = () => {alert('提交的 input:' + this.state.value)alert('提交的 textarea:' + this.state.textAreaValue)alert('提交的 select:' + this.state.selectValue)}render() {return (<form onSubmit={this.handleSubmit}><label>名字：<input value={this.state.value} onChange={this.handleNameChange}></input></label><br /><label>文章:<textarea value={this.state.textAreaValue} onChange={this.handleTextAreaChange} /></label><br /><label>选择你喜欢的风味:<select value={this.state.selectValue} onChange={this.handleSelectChange}><option value="grapefruit">葡萄柚</option><option value="lime">酸橙</option><option value="coconut">椰子</option><option value="mango">芒果</option></select></label><br /><input type="submit" value="提交" /></form>)}
}

8.2 处理多个输入

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。

class Reservation extends React.Component {constructor(props) {super(props);this.state = {isGoing: true,numberOfGuests: 2};this.handleInputChange = this.handleInputChange.bind(this);}handleInputChange(event) {const target = event.target;const value = target.type === 'checkbox' ? target.checked : target.value;const name = target.name;this.setState({[name]: value});}render() {return (<form><label>参与:<inputname="isGoing"type="checkbox"checked={this.state.isGoing}onChange={this.handleInputChange} /></label><br /><label>来宾人数:<inputname="numberOfGuests"type="number"value={this.state.numberOfGuests}onChange={this.handleInputChange} /></label></form>);}
}

9. 状态提升

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”
示例：

// 子组件 A
class A extends React.Component {constructor(props) {super(props);this.state = {};}handleClick = () => {// 这里调用父组件传过来的方法进行修改父组件的statethis.props.onGetAName('这是a传过来的')}render() {return (<div><h3>这是A组件</h3><button onClick={this.handleClick}>a按钮</button></div>)}
}// 子组件 B
class B extends React.Component {constructor(props) {super(props);this.state = {};}render() {return (<div><h3>这是B组件，接收a的数据：{this.props.name}</h3></div>)}
}// 父组件
class App extends React.Component {constructor(props) {super(props);this.state = {aName: ''};}getName = (val) => {this.setState({ aName: val })}render() {return (<div className="App"><A onGetAName={this.getName}></A><B name={this.state.aName}></B></div>)}
}

10. 组合 vs 继承

推荐使用组合而非继承来实现组件间的代码重用。

10.1 包含关系

组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：

function FancyBorder(props) {return (<div className={'FancyBorder FancyBorder-' + props.color}>{props.children}</div>);
}

这使得别的组件可以通过 JSX 嵌套，将任意组件作为子组件传递给它们。

function WelcomeDialog() {return (<FancyBorder color="blue"><h1 className="Dialog-title">Welcome</h1><p className="Dialog-message">Thank you for visiting our spacecraft!</p></FancyBorder>);
}

11. 样式

11.1 行内样式

{} 中绑定一个style对象

<h1 style={{ color: "red" }} onClick={this.click}>hello
</h1>

推荐：

const style = {fontSize: "50px",color: 'red'
};function App() {return (<div><h1 style={style}>这是 App</h1><Hello /></div>);
}

11.2 class 类名

• 注意：这里绑定class要用 className
  .css

.title {color: red;
}

App.js

<h1 className="title" onClick={this.click}>hello
</h1>