1、什么是jsx

JSX是JavaScript的擴展語法,這種<></>標簽的寫法就是 JSX。JSX 編寫的組件通過預(yù)處理器 babel 解析后,再交給 React 庫渲染到指定父容器下,形成最終html頁面,供瀏覽器解析和顯示。

JSX會被babel編譯為：React.createElement()，React.createElement()將返回一個叫作“ReactElement”的JS對象。

const element = React.createElement('h1',{className: 'greeting'},'Hello, world!' ); const element = (<h1 className="greeting">Hello, world!</h1> );

React DOM 會將元素和它的子元素與它們之前的狀態(tài)進行比較，并只會進行必要的更新來使 DOM 達到預(yù)期的狀態(tài)。

2、函數(shù)組件（無狀態(tài)）和class組件（有狀態(tài)state）

props不能再更改

function Welcome(props) {return <h1>Hello, {props.name}</h1>; } class Clock extends React.Component {constructor(props) {super(props);this.state = {date: new Date()};}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.date.toLocaleTimeString()}.</h2></div>);} }

3、react的生命周期

（1）當組件實例被創(chuàng)建并插入 DOM 中時

掛載：constructor()? ? ? render()? ? ? ? ? ? componentDidMount()

（2）當組件的 props 或 state 發(fā)生變化時會觸發(fā)更新。

更新：render()? componentDidUpdate(prevProps, prevState)

? (3)? ?卸載 ：?componentWillUnmount()

4、state的更新是異步的，React 可能會把多個?setState()?調(diào)用合并成一個調(diào)用。

//使用之前的state作為參數(shù)時

// Correct this.setState((state, props) => ({counter: state.counter + props.increment }));

5、在class組件中正確使用this的三種方法

（1）正常定義的函數(shù) 需要在構(gòu)造函數(shù)中綁定this

class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// 為了在回調(diào)中使用 `this`，這個綁定是必不可少的this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(state => ({isToggleOn: !state.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);} }ReactDOM.render(<Toggle />,document.getElementById('root') );

（2）正常定義的函數(shù)? 在回調(diào)中使用箭頭函數(shù)

class LoggingButton extends React.Component {handleClick() {console.log('this is:', this);}render() {// 此語法確保 `handleClick` 內(nèi)的 `this` 已被綁定。return (<button onClick={() => this.handleClick()}>Click me</button>);} }

（3）使用class fields語法定義函數(shù)

class LoggingButton extends React.Component {// 此語法確保 `handleClick` 內(nèi)的 `this` 已被綁定。// 注意: 這是 *實驗性* 語法。handleClick = () => {console.log('this is:', this);}render() {return (<button onClick={this.handleClick}>Click me</button>);} }

6、react的槽?

（1）props.children? (2)自定義props的名字

(1) function FancyBorder(props) {return (<div className={'FancyBorder FancyBorder-' + props.color}>{props.children}</div>); }function WelcomeDialog() {return (<FancyBorder color="blue"><h1 className="Dialog-title">Welcome</h1><p className="Dialog-message">Thank you for visiting our spacecraft!</p></FancyBorder>); }(2)自定義props的名字 function SplitPane(props) {return (<div className="SplitPane"><div className="SplitPane-left">{props.left}</div><div className="SplitPane-right">{props.right}</div></div>); }function App() {return (<SplitPaneleft={<Contacts />}right={<Chat />} />); }

7、refs：操作某個組件或者dom元素。你不能在函數(shù)組件上使用?ref?屬性，因為他們沒有實例。

（1）用React.createRef創(chuàng)建

class MyComponent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef();}render() {return <div ref={this.myRef} />;} }

訪問ref

const node = this.myRef.current;

（2）回調(diào)ref,ref是個回調(diào)函數(shù)

function CustomTextInput(props) {return (<div><input ref={props.inputRef} /></div>); }class Parent extends React.Component {render() {return (<CustomTextInputinputRef={el => this.inputElement = el}/>);} }

（3）refs轉(zhuǎn)發(fā)：使用React.forwardRef包裹箭頭函數(shù)

const FancyButton = React.forwardRef((props, ref) => (<button ref={ref} className="FancyButton">{props.children}</button> ));// 你可以直接獲取 DOM button 的 ref： const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>;

8、高階組件HOC

高階組件是參數(shù)為組件，返回值為新組件的函數(shù)。

HOC是一種復(fù)用組件邏輯的高級技巧。

HOC 自身不是 React API 的一部分，它是一種基于 React 的組合特性而形成的設(shè)計模式。

使用舉列：此高階組件只是為了每次都輸出傳入FancyButton的props

./FancyButton內(nèi)容如下： class FancyButton extends React.Component {focus() {// ...}// ... }function logProps(WrappedComponent) {class LogProps extends React.Component {componentDidUpdate(prevProps) {console.log('old props:', prevProps);console.log('new props:', this.props);}render() {return <WrappedComponent {...this.props} />;}}return LogProps; }export default logProps(FancyButton);============另一個文件開始使用此HOC=============================================== import FancyButton from './FancyButton';const ref = React.createRef();// 我們導入的 FancyButton 組件是高階組件（HOC）LogProps。 // 盡管渲染結(jié)果將是一樣的， // 但我們的 ref 將指向 LogProps 而不是內(nèi)部的 FancyButton 組件！ // 這意味著我們不能調(diào)用例如 ref.current.focus() 這樣的方法 <FancyButtonlabel="Click Me"handleClick={handleClick}ref={ref} />;

（1）不要在render里創(chuàng)建hoc，這不僅僅是性能問題 - 重新掛載組件會導致該組件及其所有子組件的狀態(tài)丟失。

React 的 diff 算法（稱為協(xié)調(diào)）使用組件標識來確定它是應(yīng)該更新現(xiàn)有子樹還是將其丟棄并掛載新子樹。 如果從?render?返回的組件與前一個渲染中的組件相同（===），則 React 通過將子樹與新子樹進行區(qū)分來遞歸更新子樹。 如果它們不相等，則完全卸載前一個子樹。

render() {// 每次調(diào)用 render 函數(shù)都會創(chuàng)建一個新的 EnhancedComponent// EnhancedComponent1 !== EnhancedComponent2const EnhancedComponent = enhance(MyComponent);// 這將導致子樹每次渲染都會進行卸載，和重新掛載的操作！return <EnhancedComponent />; }

（2）hoc的ref不會自動傳遞到被包裹組件上，該 ref 將引用最外層的容器組件logProps，需要使用React.forwardRef轉(zhuǎn)發(fā)。

function logProps(Component) {class LogProps extends React.Component {componentDidUpdate(prevProps) {console.log('old props:', prevProps);console.log('new props:', this.props);}render() {const {forwardedRef, ...rest} = this.props;// 將自定義的 prop 屬性 “forwardedRef” 定義為 refreturn <Component ref={forwardedRef} {...rest} />;}}// 注意 React.forwardRef 回調(diào)的第二個參數(shù) “ref”。// 我們可以將其作為常規(guī) prop 屬性傳遞給 LogProps，例如 “forwardedRef”// 然后它就可以被掛載到被 LogProps 包裹的子組件上。return React.forwardRef((props, ref) => {return <LogProps {...props} forwardedRef={ref} />;}); }

注意：

1、組件名稱必須以大寫字母開頭。

React 會將以小寫字母開頭的組件視為原生 DOM 標簽。例如，<div />?代表 HTML 的 div 標簽，而?<Welcome />?則代表一個組件，并且需在作用域內(nèi)使用?Welcome。

2、組件可以接受任意 props，包括基本數(shù)據(jù)類型，React 元素以及函數(shù)。

如果你想要在組件間復(fù)用非 UI 的功能，我們建議將其提取為一個單獨的 JavaScript 模塊，如函數(shù)、對象或者類。組件可以直接引入（import）而無需通過 extend 繼承它們。

3、你不能在函數(shù)組件上使用?ref?屬性，因為他們沒有實例。

4、React 的 diff 算法（稱為協(xié)調(diào)）使用組件標識來確定它是應(yīng)該更新現(xiàn)有子樹還是將其丟棄并掛載新子樹。 如果從?render?返回的組件與前一個渲染中的組件相同（===），則 React 通過將子樹與新子樹進行區(qū)分來遞歸更新子樹。 如果它們不相等，則完全卸載前一個子樹。

總結(jié)

以上是生活随笔為你收集整理的react常用知识点总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。