React 系列教程第二课

1. 上节回顾

JSX

一种 JavaScript 的语法扩展，
JSX 类似模版语言，但它完全是在 JavaScript 内部实现的。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

组件 & props

组件可以将UI切分成一些的独立的、可复用的部件;
props类似传参，但组件不能修改自己的props。

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

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

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

State

React 把组件看成是一个状态机（State Machines）。
通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。点我切换状态。
      </p>
    );
  }
});
 
ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

React 组件生命周期

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

2. 新的内容

refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例。
这样就可以确保在任何时间总是拿到正确的实例。
refs1
refs2

var MyInput = React.createClass({
      handleClick: function(){
        this.refs.theInput.focus();
      },
      render: function(){
        return (
          <div>
            <input type="text" ref="theInput" />
            <button onClick={this.handleClick}>点击获取焦点</button>
          </div>
        )
      }
    });
ReactDOM.render(<MyInput />, document.getElementById('box'));

生命周期及父组件的数据传递

生命周期：
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
1.button 生命周期及父组件的数据传递

组件间数据的传递-状态提升

子组件数据传递到父组件以及同级组件间的数据传递
2.button2 组件间数据的传递-状态提升

ES5和ES6组件写法以及非JSX组件写法

ES5写法：

var HelloMessage = React.createClass({
  render: function(){
    return (
      <div>
        hello, world
      </div>
    )
  }
});

ES6写法：

class HelloMessage extends React.Component{
  render(){
    return (
      <div>
        hello, world
      </div>
    )
  }
}

非JSX写法：

class HelloMessage extends React.Component{
  render(){
    return React.createElement("div", null, "hello, world");
  }
}

课后练习