React学习笔记（五）State&声明周期

React学习笔记（五）

四、State&声明周期

可以为组件添加“状态(state)”。状态与属性相似，但是状态是私有的，完全受控于当前组件。
局部状态就是只能用于类（定义为类的组件）的一个功能。

1. 将函数转换为类

声明一个类，继承React.Component；创建一个render()方法；使用this.props替换props。

class Clock extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is { this.props.date.toLocaleTimeSting() }.</h2>
            </div>
        )
    }
}

2. 为一个类添加局部状态

使用状态，就不应该再用this.props，而是this.state。

为类添加一个构造函数来初始化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.toLocaleTimeSting() }.</h2>
            </div>
        )
    }
}

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);

类组件应始终使用props调用基础构造函数。

3. 将生命周期方法添加到类中

这里提到两个生命周期钩子函数：

• 挂载 componentDidMount 当组件输出到DOM后
• 卸载 componentWillUnmount

通过this.setState()方法来更新组件局部状态。

class Clock extends React.Component{
    constructor() {
        ...
    }


    // 组件挂载 设置定时器
    componentDidMount() {
        this.timer = setInterval(
            () => this.tick(),
            1000
        );
    }

    // 组件卸载 清除定时器
    componentWillUnmount() {
        clearInterval(this.timer);
    }

    tick() {
        // 更新state
        this.setState({
            date: new Date()
        });
    }

    render() {
        return ...
    }
}

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);

4. 正确地使用state

• 不要直接更新状态；必须调用setState()方法。
• 同时构造函数是唯一能够初始化state的地方。
• 状态更新可能是异步的。

// 使用props和state计算下一个状态
// @param {Object} prevState 先前的状态
// @param {Object} props 此次更新被应用时的props
this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
}));

• 状态更新合并。也就是说，调用setState()时，提供的对象是合并至当前状态中。且完全替换这个状态。

5. 数据自顶向下流动（单向数据流）

状态应当只有组件本身拥有并设置它；
但组件可以将其状态作为属性传递给其子组件。也就是说，从该状态导出的任何数据或UI只能影响数中下方的组件。
这就是单向数据流。

The end... Last updated by: Jehorn, April 15, 2019, 5:20 PM