React 基础

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为undefined
    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.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>
          参与:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          来宾人数:
          <input
            name="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 = () => {
    // 这里调用父组件传过来的方法进行修改父组件的state
    this.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>