React学习(2) 生命周期方法及有条件渲染

Posted on | In

React 生命周期方法概览

看了官方文档，简单讲就是mount update 和 unmount 三个大周期下可以调用若干生命周期函数钩子来在对应的生命周期执行某些操作。

生命周期

主要的生命周期方法包括

1
2
3
4
5
6
7
8
9
10
11
12
13
14

componentWillMount()

componentDidMount()

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

componentDidUpdate()

componentWillUnmount()

freecodecamp 里有一个经典的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//mount完成， 加入事件监听
 componentDidMount() {
   document.addEventListener("keydown",this.handleKeyPress)
 }
  //将要unmount，注销事件监听
 componentWillUnmount() {
   document.removeEventListener("keydown",this.handleKeyPress)
 }
 // change code above this line
 handleEnter() {
   this.setState({
     message: this.state.message + 'You pressed the enter key! '
   });
 }
 handleKeyPress(event) {
   if (event.keyCode === 13) {
     this.handleEnter();
   }
 }

还有一个shouldComponentUpdate()的例子，这个方法返回true／false来决定组件是否update

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
shouldComponentUpdate(nextProps, nextState) {
   console.log('Should I update?');
    //例子为当value为偶数才更新
    if(nextProps.value%2==0){
      return true
      }else{
        return false
        }

 }
 componentWillReceiveProps(nextProps) {
   console.log('Receiving new props...');
 }
 componentDidUpdate() {
   console.log('Component re-rendered.');
 }

Conditional rendering

这个其实就是在render里使用if／else && 或三元运算来进行判断，决定渲染与否以及渲染内容

写完条件判断以后根据state来有条件的渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

const inputStyle = {
  width: 235,
  margin: 5
}

class CheckUserAge extends React.Component {
  constructor(props) {
    super(props);
    // change code below this line
    this.state={
      input:'',
      userAge:''
    }
    // change code above this line
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState({
      userAge: this.state.input
    });
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;
    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
        {
          this.state.userAge==''? buttonOne:this.state.userAge<18?buttonThree:buttonTwo
        }
      </div>
    );
  }
};

freecodecamp 里依据state.userAge 渲染不同按钮的例子。