-
this.state只能賦值在構(gòu)造函數(shù)中constructor锰霜。 - 組件可以選擇把它的
state作為props向下傳遞到它的子組件中筹误。即自上而下的數(shù)據(jù)流，任何的state總是所屬于特定的組件癣缅，而且從該state派生的任何數(shù)據(jù)或 UI 只能影響樹(shù)中“低于”它們的組件厨剪。 - JSX中需要傳入一個(gè)函數(shù)作為時(shí)間處理函數(shù)勘畔。
<button onClick={activateLasers}>
Activate Lasers
</button>
- 如果注冊(cè)捕獲階段的事件處理函數(shù)，則應(yīng)為事件名后添加
Capture丽惶。例如炫七，處理捕獲階段的點(diǎn)擊事件請(qǐng)使用onClickCapture，而不是onClick钾唬。 - 合成事件
event
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
這里的e就是合成事件万哪。
- 對(duì)于使用
class創(chuàng)建的組件，通常把事件處理函數(shù)作為組件的方法抡秆。 - 在JS中奕巍，
class中的方法默認(rèn)不會(huì)綁定this，所以對(duì)于callback儒士，需要綁定this強(qiáng)制使其指向當(dāng)前實(shí)例的止，確保在這個(gè)處理函數(shù)中使用this時(shí)可以時(shí)刻指向這一組件的實(shí)例。如果不綁定會(huì)怎么樣呢着撩，會(huì)引起this指向丟失诅福，為undefined。有三種方式綁定：
- 在構(gòu)造中使用
bind綁定
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
- 在聲明方法的時(shí)候使用箭頭函數(shù)
handleClick = () => {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
- 調(diào)用的時(shí)候使用箭頭函數(shù)
render() {
return (
<button onClick={ () => { this.handleClick } }>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
- 阻止組件被渲染拖叙，
render直接返回null氓润。 - key：key 幫助 React 識(shí)別哪些元素改變了，比如被添加或刪除薯鳍。至于它的重要性咖气，回頭再閱讀，碼上挖滤。深度解析為什么key是必須的
