開篇
安裝create-react-app
1. JSX 簡介
jsx 本質(zhì)上還是js，因此遵循駝峰命名的方式
1、jsx 屬性
2、sx 防止xss漏洞
XSS漏洞分為兩種滓窍，一種是DOM Based XSS漏洞，另一種是Stored XSS漏洞巩那。理論上吏夯，所有可輸入的地方?jīng)]有對輸入數(shù)據(jù)進(jìn)行處理的話此蜈，都會(huì)存在XSS漏洞，漏洞的危害取決于攻擊代碼的威力噪生，攻擊代碼也不局限于 script
所有的數(shù)據(jù)在頁面渲染之前都會(huì)被轉(zhuǎn)換成字符串裆赵，這防止 XSS 進(jìn)攻
3、dangerouslySetInnerHTML
4跺嗽、false/undefined/null/0 如何渲染战授？
組件的第一個(gè)字母必須大寫是因?yàn)榧s定，否則babel會(huì)轉(zhuǎn)譯出錯(cuò)桨嫁。
2. React 組件和props
設(shè)置默認(rèn)的props
在class里 static defaultProps
在外面直接寫靜態(tài)屬性
類型檢測
https://blog.csdn.net/Her_smile/article/details/79638715?utm_source=blogxgwz0
https://blog.csdn.net/kuangshp128/article/details/68065558?utm_source=blogxgwz1
React組件有幾種生成方式
function 形式
class
條件渲染有幾種方式
function if/else
變量賦值
inline 形式 植兰， 比如 {condition && component}, 或者 ? : 操作
props / props.children
pure function
屬性不可修改
如何掛載到dom元素上 ReactDOM.render()
3. state 和 生命周期函數(shù)
setState 是 異步的嗎？ this.state.a 的訪問情況
didMount和unmount的作用
shouldUpdate的作用璃吧，如果shouldUpdate 返回了false楣导，子組件的render還觸發(fā)嗎？哪些函數(shù)不再執(zhí)行了畜挨？willUpdate和didUpdate筒繁，render 都不在觸發(fā)了
setState觸發(fā)后發(fā)生了什么？
constructor
componentWillMount
render
componentDidMount
//這個(gè)循環(huán)將會(huì)執(zhí)行一次
如果想訪問dom元素必須在componentDidMount里面訪問朦促，
如果shouldComponentUpdate如果為false膝晾，那么componentWillUpdate 和componentDidUpdate 以及render函數(shù)是不會(huì)執(zhí)行的
this.setState的改變將不會(huì)觸發(fā)componentWillReceiveProps的改變
注冊的事件必須在componentWillUnmount里面移除栓始，防止內(nèi)存泄漏务冕。
在添加綁定事件的時(shí)候，三種this轉(zhuǎn)作用域的方法
/*在**render**里面事件監(jiān)聽元素上面添加幻赚，但是每次都會(huì)綁定出一個(gè)新的地址禀忆，如果組件發(fā)生改變，里面也會(huì)被重新渲染落恼，影響性能,同樣在render里面寫箭頭函數(shù)也是一樣的*/
onClick={this.handleClick.bind(this)}
/*在constructor里面進(jìn)行綁定箩退，只需要綁定一次，可復(fù)用性強(qiáng)*/
this.handleClick = this.handleClick.bind(this)
//通過箭頭函數(shù)佳谦，會(huì)在constructor里面調(diào)用
handleClick = () =>{...}
4. refs 和 dom元素
ref的倆種使用方式
handleClick = (event) => {
this.contentRef.style.color = "red";
}
render() {
console.log('render')
return (
<div className="App" onClick={this.handleClick}>
<div ref={(content) => {this.contentRef = content}}>
//推薦使用４骼浴！钻蔑！
//要訪問dom加ref訪問啥刻，不建議直接getElement（性能不好）
this time is {this.state.time}
</div>
</div>
);
}
handleClick = (event) => {
this.refs.content.style.color = "red";
}
render() {
console.log('render')
return (
<div className="App" onClick={this.handleClick}>
<div ref="content">
this time is {this.state.time}
</div>
</div>
);
}
-----------------為了性能考慮，請使用以下方式修改----------
在this.state中添加color:''咪笑；
在div上加style={{color:this.state.color}};
在handleClick中添加this.setState({color:'red'});
/*在做動(dòng)畫的時(shí)候可帽，是比較耗時(shí)的，最好使用上面的方式
或者使用class
*/
在div上加 className={{this.state.a?"a":"b"}}
refs是字符串有什么問題窗怒？
dom元素頻繁訪問有什么問題映跟？
影響性能
5. 事件
1.如何阻止默認(rèn)行為蓄拣？ return false 可以嗎？
2.SyntheticEvent 是什么東西努隙？
event 可以放到異步里面嗎球恤？ 比如 setTimeout(() => {console.log(event)}, 1)
事件里面的作用域
<div onClick=""></div>
function test(event) {
return false;
}
//react event
handleClick = (event) => {
event.stopPropagation();
event.preventDefault(); // 在react里面也是可以這樣調(diào)用的
setTimeout(() => {
console.log(event.type)
//event在異步是無法調(diào)用的，每次event調(diào)用后都會(huì)被銷毀
},0)
console.log(event.type)
}
//原生里面的event和react里面的event是不一樣的
//react里面的event是被react封裝過的
//react里面封裝的event SyntheticEvent擁有大部分原生event的方法和屬性
//可以通過event.nativeEvent == 原生的event
6. JSX和HTML有什么區(qū)別荸镊？
屬性
事件
空格
7.list渲染
key的作用是什么碎捺，key如果不穩(wěn)定有什么問題嗎？
避免整體list被渲染贷洲，要取得比較穩(wěn)定收厨，不建議用index之類，耗性能优构。如果不增減index可以诵叁，最好添加id相對比較穩(wěn)定。
上面代碼钦椭，如list中某項(xiàng)改變了可以通過shouldComponentUpdate來判斷是否需要改變
8.this.props.children
9.ReactDOM.render
其中ReactDOM.render接收三個(gè)參數(shù)拧额，第一個(gè)是組件，第二個(gè)是節(jié)點(diǎn)彪腔，第三個(gè)是渲染后的回調(diào)侥锦。
10.深拷貝
