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");
}
}
