React 基础笔记2 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 4 天，今天学习了 React 元

这是我参与「第五届青训营」伴学笔记创作活动的第 4 天，今天学习了 React 元素、组件、State、生命周期方法等。

React 元素

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

定义元素

const element = <h1>Hello, world!</h1>;

渲染元素

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。

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

或者使用 ReactDOM.createRoot() 创建根 DOM 节点，然后使用 root.render(element) 将元素渲染到页面上。

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

更新已渲染的元素

React 元素是不可变对象，目前更新 UI 唯一的方式是创建一个全新的元素，并将其传入 root.render()。

在 React State 中会介绍其他方法。

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

React 组件

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。¹

定义组件（函数声明）

定义组件最简单的方式就是编写 JavaScript 函数：

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

定义组件（class 声明）

通过以下五步将函数组件转成 class 组件：

创建一个同名的 ES6 class，并且继承于 React.Component。
添加一个空的 render() 方法。
将函数体移动到 render() 方法之中。
在 render() 方法中使用 this.props 替换 props。
删除剩余的空函数声明。

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

Props

组件接收唯一带有数据的 “props” 对象与并返回一个 React 元素。在组件中可以通过props获取传入的数据。

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

组合组件

组件可以在其输出中引用其他组件。

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

function App() {
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Cahal" />
            <Welcome name="Edite" />
        </div>
    );
}

渲染组件

React 元素可以是用户自定义的组件，可以像渲染普通元素那样渲染组件。

const element = <Welcome name="Sara" />;
ReactDOM.render(
    element,
    document.getElementById('example')
);

React State

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。

向 class 组件中添加局部的 state

添加一个 class 构造函数，然后在该函数中为 this.state 赋初值。

constructor(props) {
    super(props);
    this.state = {
        date: new Date()
    };
}

修改 State

setState() 接收一个函数，这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数。

可以使用箭头函数：

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

或者使用普通函数：

this.setState(function(state, props) {
    return {
        counter: state.counter + props.increment
    };
});

React 生命周期方法

为 class 组件声明一些特殊的方法，当组件挂载或卸载时就会去执行这些方法：

componentDidMount() {

}
componentWillUnmount() {

}

React官方文档 ↩

React 基础笔记2 | 青训营笔记