Props、State、Refs 与表单处理

我们也了解到 React Component 事实上可以视为显示 UI 的一个状态机（state machine），而这个状态机根据不同的 state（透过 setState() 修改）和 props（由父元素传入），Component 会出现对应的显示结果。

本章将使用 React 官网首页上的范例（使用 ES6+）来更进一步说明 Props 和 State 特性及在 React 如何进行事件和表单处理。

props

 

使用 ES6 Class Component 写法：

class HelloMessage extends React.Component {
        // 若是需要绑定 this.方法或是需要在 constructor 使用 props，定义 state，就需要 constructor。若是在其他方法（如 render）使用 this.props 则不用一定要定义 constructor
        constructor(props) {
                // 对于 OOP 物件导向程式设计熟悉的读者应该对于 constructor 建构子的使用不陌生，事实上它是 ES6 的语法糖，骨子里还是 prototype based 物件导向程式语言。透过 extends 可以继承 React.Component 父类别。super 方法可以呼叫继承父类别的建构子
                super(props);
                this.state = {}
        }
        // render 是唯一必须的方法，但如果是单纯 render UI 建议使用 Functional Component 写法，效能较佳且较简洁
        render() {
                return (
                        <div>Hello {this.props.name}</div>
                )
        }
}

// PropTypes 验证，若传入的 props type 不是 string 将会显示错误HelloMessage.propTypes = {
  name: React.PropTypes.string,
}

// Prop 预设值，若对应 props 没传入值将会使用 default 值 ZuckHelloMessage.defaultProps = {
 name: 'Zuck',
}

ReactDOM.render(<HelloMessage name="Mark" />, document.getElementById('app'));

 

 

 

使用 Functional Component 写法：

// Functional Component 可以视为 f(d) => UI，根据传进去的 props 绘出对应的 UI。注意这边 props 是传入函式的参数，因此取用 props 不用加 thisconst HelloMessage = (props) => (
        <div>Hello {props.name}</div>
);

// PropTypes 验证，若传入的 props type 不是 string 将会显示错误HelloMessage.propTypes = {
  name: React.PropTypes.string,
}

// Prop 预设值，若对应 props 没传入值将会使用 default 值 Zuck。用法等于 ES5 的 getDefaultPropsHelloMessage.defaultProps = {
 name: 'Zuck',
}

ReactDOM.render(<HelloMessage name="Mark" />, document.getElementById('app'));

 

State

接下来我们将使用 A Stateful Component 这个范例来讲解 State 的用法。在 React Component 可以自己管理自己的内部 state，并用 this.state 来存取 state。当 setState() 方法更新了 state 后将重新呼叫 render() 方法，重新绘制 component 内容。以下范例是一个每 1000 毫秒（等于1秒）就会加一的累加器。由于这个范例是 Stateful Component 因此仅使用 ES6 Class Component，而不使用 Functional Component。

class Timer extends React.Component {
        constructor(props) {
                super(props);
                // 与 ES5 React.createClass({}) 不同的是 component 内自定义的方法需要自行绑定 this context，或是使用 arrow function
        this.tick = this.tick.bind(this);
                // 初始 state，等于 ES5 中的 getInitialState
                this.state = {
                        secondsElapsed: 0,
                }
        }
        // 累加器方法，每一秒被呼叫后就会使用 setState() 更新内部 state，让 Component 重新 render
        tick() {
            this.setState({secondsElapsed: this.state.secondsElapsed + 1});
        }
        // componentDidMount 为 component 生命周期中阶段 component 已插入节点的阶段，通常一些非同步操作都会放置在这个阶段。这便是每1秒钟会去呼叫 tick 方法
        componentDidMount() {
            this.interval = setInterval(this.tick, 1000);
        }
        // componentWillUnmount 为 component 生命周期中 component 即将移出插入的节点的阶段。这边移除了 setInterval 效力
        componentWillUnmount() {
                clearInterval(this.interval);
        }
        // render 为 class Component 中唯一需要定义的方法，其回传 component 欲显示的内容
        render() {
            return (
              <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
            );
        }
}

ReactDOM.render(<Timer />, document.getElementById('app'));

 

 

事件处理（Event Handle）

// 与 ES5 React.createClass({}) 不同的是 component 内自定义的方法需要自行绑定 this context，或是使用 arrow function
        this.tick = this.tick.bind(this);