React学习（2）——状态、事件与动态渲染

组件状态和生命周期

ReactDOM.render()

function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}

setInterval(tick, 1000);

function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}.</h2>
</div>
);
}

function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}

setInterval(tick, 1000);

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

用class替换function来创建一个组件

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

var Clock = React.createClass({
render: function () {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
});

向class中增加本地的state

class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
//使用state来定义变量
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
// ——————
</div>
);
}
}

class Clock extends React.Component {
//构造方法
constructor(props) {
//构造父类
super(props);
//初始化this.state
this.state = {date: new Date()};
}

render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

var Clock = React.createClass({
//官网的最新文档已经说明在ES6中使用构造方法来替换getInitialState初始化state
getInitialState: function () {
return {date: new Date()};
},
render: function () {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
});

ReactDOM.render(
<Clock />,//移除date={new Date()}的属性
document.getElementById('root')
);

向类中增加事件方法（Lifecycle Methods）

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {//组件完成Dom渲染时会被调用

}
componentWillUnmount() {//组件从Dom删除之前会被调用

}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

var Clock = React.createClass({
getInitialState: function () {
return {date: new Date()};
},
componentDidMount:function() {

},
componentWillUnmount:function() {

},
render: function () {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
});

componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}

componentDidMount() {//组件渲染之后创建计数器
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {//组件销毁之前移除计数器
clearInterval(this.timerID);
}

tick() {//使用父类React.Component的setState()方法更新state：设置当前时间
this.setState({
date: new Date()
});
}

render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

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

var Clock = React.createClass({
getInitialState: function () {
return {date: new Date()};
},
componentDidMount: function () {
this.timerID = setInterval(function () {
this.tick();
}, 1000);
},
componentWillUnmount: function () {
clearInterval(this.timerID);
},
tick:function () {
this.setState({
date: new Date()
});
},
render: function () {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
});

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

正确的使用state

// Wrong
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});

// Correct
// es6函数式
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));

// JavaScript
this.setState(function(prevState, props){
return {
counter: prevState.counter + props.increment
};
});

constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}

componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});

fetchComments().then(response => {
this.setState({
comments: response.comments
});
});
}

数据单向性

<FormattedDate date={this.state.date} />

function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
}

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

事件处理

<button onclick="activateLasers()">
Activate Lasers
</button>

<button onClick={activateLasers}>
Activate Lasers
</button>

preventDefault

<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>

function ActionLink() {//定义一个组件
function handleClick(e) {
e.preventDefault();//阻止冒泡行为
console.log('The link was clicked.');
}

return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}

addEventListener

class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};

// 必须要使用bind方法确保this实例响应回调事件
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}

render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}

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

根据条件渲染

function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}

ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);

元素变量

function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}

function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}

class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}

handleLoginClick() {
this.setState({isLoggedIn: true});
}

handleLogoutClick() {
this.setState({isLoggedIn: false});
}

render() {
const isLoggedIn = this.state.isLoggedIn;

let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}

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

使用&&实现更紧凑的语法

function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);

使用？：；三目表达式

render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}

condition ? true : false

render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}

隐藏组件

function WarningBanner(props) {
if (!props.warn) {
return null;
}

return (
<div className="warning">
Warning!
</div>
);
}

class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}

handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}

render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}

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