1,性能优化
https://react.css88.com/docs/optimizing-performance.html#examples
2,组件,state(状态) 和 props(属性)的理解
每当你对 JavaScript 中的某些东西感到困惑时,查阅 MDN 和 javascript.info
社区支持论坛
3,state(状态) 更新可能是异步的
this.props 和 this.state 可能是异步更新的
// 错误
this.setState({
counter: this.state.counter + this.props.increment,
});
要解决这个问题,应该使用第 2 种 setState() 的格式,它接收一个函数,而不是一个对象。该函数接收前一个状态值作为第 1 个参数, 并将更新后的值作为第 2 个参数:
// 正确
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
4,事件处理
在 React 中你不能通过返回 false 来阻止默认行为。必须明确调用 preventDefault 。
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
对于纯 HTML ,要阻止链接打开一个新页面的默认行为,可以这样写
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在 JavaScript 中, true && expression 总是会评估为 expression ,而 false && expression 总是执行为 false 。
5,keys 只在数组的上下文中存在意义。
select 标签中使用了一个 value 属性
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
您可以将一个数组传递给 value 属性,允许你在 select 标签中选择多个选项
<select multiple={true} value={['B', 'C']}>
6,组合
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
{props.children}
</FancyBorder>
);
}
class SignUpDialog extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {login: ''};
}
render() {
return (
<Dialog title="Mars Exploration Program"
message="How should we refer to you?">
<input value={this.state.login}
onChange={this.handleChange} />
<button onClick={this.handleSignUp}>
Sign Me Up!
</button>
</Dialog>
);
}
handleChange(e) {
this.setState({login: e.target.value});
}
handleSignUp() {
alert(`Welcome aboard, ${this.state.login}!`);
}
}