您好,登錄后才能下訂單哦!
這篇文章主要介紹Javascript之React的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
前言
React核心的單向數(shù)據(jù)流、一切皆數(shù)據(jù)的state、不會改變的props,以及狀態(tài)提升等等經(jīng)常使用便不多總結(jié),需要的看官方文檔。
JSX
JSX 本質(zhì)只是為 React.createElement(component, props, ...children)提供的語法糖!
1.React DOM 在渲染之前都被轉(zhuǎn)換成了字符串,它天生自帶防止 XSS 攻擊的屬性。
2.Babel 轉(zhuǎn)譯器會把 JSX 轉(zhuǎn)換成一個(gè)名為 React.createElement()的方法調(diào)用。在線babel編譯
以下兩段代碼等價(jià)(許多react的界面設(shè)計(jì)器通過這個(gè)原理,達(dá)到元數(shù)據(jù)轉(zhuǎn)化React元素,實(shí)現(xiàn)界面化編程?。?br/>嵌套就是多個(gè)create方法的嵌套。
function hello() { return <div className="red">Hello,<span>world!</span></div>; } "use strict"; function hello() { return React.createElement( "div", { className: "red" }, "Hello,", React.createElement( "span", null, "world!" ) ); }
3.JSX中的屬性是可以任何 {} 包裹的 JavaScript 表達(dá)式作為一個(gè)屬性值,不能使用if和for。
需要循環(huán)和條件渲染可以使用map、三目,或者使用if/for在jsx代碼之外!
//錯(cuò)誤的! class A extends React.Component { render() { return <div>{if(){}else{}}</div>;//原來還蒙蔽的不知道為什么錯(cuò)了0.0 } }
React.Component (組件)
創(chuàng)建組件的四種方式:
React.Component 方式
class Greeting extends React.Component { render() { return <h2>Hello, {this.props.name}</h2>; } }
ES5
var createReactClass = require('create-react-class'); var Greeting = createReactClass({ render: function() { return <h2>Hello, {this.props.name}</h2>; } }); //或者使用react var Greeting = React.create({ render: function() { return <h2>Hello, {this.props.name}</h2>; } });
函數(shù)式
const Button = ({ day, increment }) => { return ( <div> <button onClick={increment}>Today is {day}</button> </div> ) }
PureComponet
大多數(shù)情況下, 我們使用PureComponent能夠簡化我們的代碼,并且提高性能,但是PureComponent的自動為我們添加的shouldComponentUpate函數(shù),只是對props和state進(jìn)行淺比較(shadow comparison),當(dāng)props或者state本身是嵌套對象或數(shù)組等時(shí),淺比較并不能得到預(yù)期的結(jié)果,這會導(dǎo)致實(shí)際的props和state發(fā)生了變化,但組件卻沒有更新的問題。當(dāng)然還是有解決的方法的,所以建議還是少用。
事件處理
事件綁定的四種方法:推薦使用第一第二種。
class Toggle extends React.Component { constructor(props) { {...} //方法一必須在這里綁定 this.handleClick1 = this.handleClick.bind(this); } handleClick1() { this... } //方法二使用【屬性初始化器語法】【需要開啟babel stage-0以上】 handleClick2=()=> { this... } render() { return ( <div> <button onClick={this.handleClick1}></button> <button onClick={this.handleClick2}></button> //方法三在使用時(shí)綁定 <button onClick={this.handleClick1.bind(this)}></button> //方法四在回調(diào)函數(shù)中使用 箭頭函數(shù) /** 渲染的時(shí)候都會創(chuàng)建一個(gè)不同的回調(diào)函數(shù)。在大多數(shù)情況下,這沒有問題。然而如果這個(gè)回調(diào)函數(shù)作為一個(gè)屬性值傳入低階組件,這些組件可能會進(jìn)行額外的重新渲染。我們通常建議在構(gòu)造函數(shù)中綁定或使用屬性初始化器語法來避免這類性能問題。 **/ <button onClick={(e) => this.handleClick1(e)}></button> </div> ); } }
組合 vs 繼承
在React中不推薦使用繼承,不推薦繼承自定義Component。
//不推薦使用 class Parent extends React.Component { render() { return <div>...</div>; } } class A extends Parent { render() { return <div>...</div>; } } //推薦使用 class A extends React.Component { render() { return <Parent>...</Parent>; } }
不使用 ES6
Component || create
defaultProps || getDefaultProps
constructor state || getInitialState
this bind || 不需要
class Greeting extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; this.handleClick = this.handleClick.bind(this); } handleClick() { alert(this.state.message); } render() { return <h2 onClick={this.handleClick}>Hello, {this.props.name}</h2>; } } Greeting.defaultProps = { name: 'Mary' }; var createReactClass = require('create-react-class'); var Greeting = createReactClass({ getInitialState: function() { return {count: this.props.initialCount}; }, getDefaultProps: function() { return { name: 'Mary' }; }, handleClick: function() { alert(this.state.message); }, render: function() { //組件中的方法會自動綁定至實(shí)例,不需要像上面那樣加 .bind(this) return <h2 onClick={this.handleClick}>Hello, {this.props.name}</h2>; } });
Refs
1.如果可以通過聲明式實(shí)現(xiàn),則盡量避免使用 refs。
2.不能在函數(shù)式組件上使用 ref 屬性,因?yàn)樗鼈儧]有實(shí)例
3.舊版 API:String 類型的 Refs,存在問題,可能會在未來移除,不推薦使用。
4.對父組件暴露refs,在父元素拿子元素
function CustomTextInput(props) { return ( <div> <input ref={props.inputRef} /> </div> ); } class Parent extends React.Component { //this.inputElement 就是CustomTextInput中的input render() { return ( <CustomTextInput inputRef={el => this.inputElement = el} /> ); } }
ReactDOM
獲取一個(gè)DOM除了refs還有更加簡單粗暴的方法findDOMNode。
findDOMNode 是用于操作底層DOM節(jié)點(diǎn)的備用方案。使用它的優(yōu)先級比refs更低??!
findDOMNode 只對掛載過的組件有效。
findDOMNode 不能用于函數(shù)式的組件中。
import ReactDOM from 'react-dom'; ReactDOM.render( element, container, [callback]//不為人知的第三個(gè)參數(shù)?。? ) ReactDOM.unmountComponentAtNode(container) ReactDOM.findDOMNode(component)
不常用的新發(fā)現(xiàn)
空的 JSX 標(biāo)簽Fragments <></>或者<React.Fragment></React.Fragment>
與運(yùn)算符 && true && expression 總是返回 expression,而 false && expression 總是返回 false。
阻止組件渲染常用null組件的 render 方法返回 null 并不會影響該組件生命周期方法的回調(diào)。例如,componentWillUpdate 和 componentDidUpdate 依然可以被調(diào)用。
以上是“Javascript之React的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。