回顧Javascript React基礎(chǔ)
前言
React核心的單向數(shù)據(jù)流、一切皆數(shù)據(jù)的state、不會(huì)改變的props，以及狀態(tài)提升等等經(jīng)常使用便不多總結(jié)，需要的看官方文檔。
JSX
JSX 本質(zhì)只是為 React.createElement(component, props, ...children)提供的語(yǔ)法糖！
- 1.React DOM 在渲染之前都被轉(zhuǎn)換成了字符串，它天生自帶防止 XSS 攻擊的屬性。
- 2.Babel 轉(zhuǎn)譯器會(huì)把 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 <h1>Hello, {this.props.name}</h1>;
}
}
ES5
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
//或者使用react
var Greeting = React.create({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
函數(shù)式
const Button = ({
day,
increment
}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}
PureComponet
大多數(shù)情況下， 我們使用PureComponent能夠簡(jiǎn)化我們的代碼，并且提高性能，但是PureComponent的自動(dòng)為我們添加的shouldComponentUpate函數(shù)，只是對(duì)props和state進(jìn)行淺比較(shadow comparison)，當(dāng)props或者state本身是嵌套對(duì)象或數(shù)組等時(shí)，淺比較并不能得到預(yù)期的結(jié)果，這會(huì)導(dǎo)致實(shí)際的props和state發(fā)生了變化，但組件卻沒有更新的問題。當(dāng)然還是有解決的方法的，所以建議還是少用。
事件處理
事件綁定的四種方法：推薦使用第一第二種。
class Toggle extends React.Component {
constructor(props) {
{...}
//方法一必須在這里綁定
this.handleClick1 = this.handleClick.bind(this);
}
handleClick1() {
this...
}
//方法二使用【屬性初始化器語(yǔ)法】【需要開啟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í)候都會(huì)創(chuàng)建一個(gè)不同的回調(diào)函數(shù)。在大多數(shù)情況下，這沒有問題。然而如果這個(gè)回調(diào)函數(shù)作為一個(gè)屬性值傳入低階組件，這些組件可能會(huì)進(jìn)行額外的重新渲染。我們通常建議在構(gòu)造函數(shù)中綁定或使用屬性初始化器語(yǔ)法來避免這類性能問題。
**/
<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 <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
}
}
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() {
//組件中的方法會(huì)自動(dòng)綁定至實(shí)例，不需要像上面那樣加 .bind(this)
return <h1 onClick={this.handleClick}>Hello, {this.props.name}</h1>;
}
});
Refs
1.如果可以通過聲明式實(shí)現(xiàn)，則盡量避免使用 refs。
2.不能在函數(shù)式組件上使用 ref 屬性，因?yàn)樗鼈儧]有實(shí)例
3.舊版 API：String 類型的 Refs，存在問題，可能會(huì)在未來移除，不推薦使用。
4.對(duì)父組件暴露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還有更加簡(jiǎn)單粗暴的方法findDOMNode。
findDOMNode 是用于操作底層DOM節(jié)點(diǎn)的備用方案。使用它的優(yōu)先級(jí)比refs更低！！
findDOMNode 只對(duì)掛載過的組件有效。
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 并不會(huì)影響該組件生命周期方法的回調(diào)。例如，componentWillUpdate 和 componentDidUpdate 依然可以被調(diào)用。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ReactNative踩坑之配置調(diào)試端口的解決方法
本篇文章主要介紹了ReactNative踩坑之配置調(diào)試端口的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
react?事項(xiàng)懶加載的三種方法及使用場(chǎng)景
這篇文章主要介紹了react?事項(xiàng)懶加載的三種方法及使用場(chǎng)景，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了React從Class方式轉(zhuǎn)Hooks詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
這篇文章主要為大家介紹了GraphQL在react中的應(yīng)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React無限滾動(dòng)加載列表組件的封裝實(shí)現(xiàn)
無限下拉加載技術(shù)是用戶在大量成塊的內(nèi)容面前一直滾動(dòng)查看,本文主要介紹了React無限滾動(dòng)加載列表組件的封裝實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式
這篇文章主要介紹了react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了React基于RBAC的權(quán)限控制,通過定義角色和權(quán)限、編寫權(quán)限檢查函數(shù)以及在路由、組件和選擇控件中使用這些函數(shù),可以靈活地控制應(yīng)用中的訪問權(quán)限,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了redux副作用處理之redux-thunk使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
react-native android狀態(tài)欄的實(shí)現(xiàn)
這篇文章主要介紹了react-native android狀態(tài)欄的實(shí)現(xiàn)，使?fàn)顟B(tài)欄顏色與App顏色一致，使用戶界面更加整體。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了淺談react前后端同構(gòu)渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09