Javascript之React的示例分析

這篇文章主要介紹Javascript之React的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

前言

React核心的單向數據流、一切皆數據的state、不會改變的props，以及狀態提升等等經常使用便不多總結，需要的看官方文檔。

JSX

JSX 本質只是為 React.createElement(component, props, ...children)提供的語法糖！

• 1.React DOM 在渲染之前都被轉換成了字符串，它天生自帶防止 XSS 攻擊的屬性。

• 2.Babel 轉譯器會把 JSX 轉換成一個名為 React.createElement()的方法調用。在線babel編譯

以下兩段代碼等價（許多react的界面設計器通過這個原理，達到元數據轉化React元素，實現界面化編程！）
嵌套就是多個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 表達式作為一個屬性值，不能使用if和for。

需要循環和條件渲染可以使用map、三目，或者使用if/for在jsx代碼之外！

//錯誤的！
class A extends React.Component {
render() {
return <div>{if(){}else{}}</div>;//原來還蒙蔽的不知道為什么錯了0.0
}
}

React.Component （組件）

創建組件的四種方式：

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>;
}
});

函數式

const Button = ({
day,
increment
}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}

PureComponet

大多數情況下， 我們使用PureComponent能夠簡化我們的代碼，并且提高性能，但是PureComponent的自動為我們添加的shouldComponentUpate函數，只是對props和state進行淺比較(shadow comparison)，當props或者state本身是嵌套對象或數組等時，淺比較并不能得到預期的結果，這會導致實際的props和state發生了變化，但組件卻沒有更新的問題。當然還是有解決的方法的，所以建議還是少用。

事件處理

事件綁定的四種方法：推薦使用第一第二種。

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>
//方法三在使用時綁定
<button onClick={this.handleClick1.bind(this)}></button>
//方法四在回調函數中使用 箭頭函數
/**
渲染的時候都會創建一個不同的回調函數。在大多數情況下，這沒有問題。然而如果這個回調函數作為一個屬性值傳入低階組件，這些組件可能會進行額外的重新渲染。我們通常建議在構造函數中綁定或使用屬性初始化器語法來避免這類性能問題。
**/
<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() {
//組件中的方法會自動綁定至實例，不需要像上面那樣加 .bind(this)
return <h2 onClick={this.handleClick}>Hello, {this.props.name}</h2>;
}
});

Refs

1.如果可以通過聲明式實現，則盡量避免使用 refs。

2.不能在函數式組件上使用 ref 屬性，因為它們沒有實例

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

獲取一個DOM除了refs還有更加簡單粗暴的方法findDOMNode。

findDOMNode 是用于操作底層DOM節點的備用方案。使用它的優先級比refs更低！！

findDOMNode 只對掛載過的組件有效。

findDOMNode 不能用于函數式的組件中。

import ReactDOM from 'react-dom';
ReactDOM.render(
element,
container,
[callback]//不為人知的第三個參數！！
)
ReactDOM.unmountComponentAtNode(container)
ReactDOM.findDOMNode(component)

不常用的新發現

• 空的 JSX 標簽Fragments <></>或者<React.Fragment></React.Fragment>

• 與運算符 && true && expression 總是返回 expression，而 false && expression 總是返回 false。

• 阻止組件渲染常用null組件的 render 方法返回 null 并不會影響該組件生命周期方法的回調。例如，componentWillUpdate 和 componentDidUpdate 依然可以被調用。

以上是“Javascript之React的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！