1、什么是jsx

JSX是JavaScript的擴展語法,這種<></>標簽的寫法就是 JSX。JSX 編寫的組件通過預處理器 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 會將元素和它的子元素與它們之前的狀態進行比較，并只會進行必要的更新來使 DOM 達到預期的狀態。

2、函數組件（無狀態）和class組件（有狀態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）當組件實例被創建并插入 DOM 中時

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

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

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

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

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

//使用之前的state作為參數時

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

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

（1）正常定義的函數 需要在構造函數中綁定this

class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// 為了在回調中使用 `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）正常定義的函數? 在回調中使用箭頭函數

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

（3）使用class fields語法定義函數

class LoggingButton extends React.Component {// 此語法確保 `handleClick` 內的 `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元素。你不能在函數組件上使用?ref?屬性，因為他們沒有實例。

（1）用React.createRef創建

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）回調ref,ref是個回調函數

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

（3）refs轉發：使用React.forwardRef包裹箭頭函數

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

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

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

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

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

./FancyButton內容如下： 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。 // 盡管渲染結果將是一樣的， // 但我們的 ref 將指向 LogProps 而不是內部的 FancyButton 組件！ // 這意味著我們不能調用例如 ref.current.focus() 這樣的方法 <FancyButtonlabel="Click Me"handleClick={handleClick}ref={ref} />;

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

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

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

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

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 回調的第二個參數 “ref”。// 我們可以將其作為常規 prop 屬性傳遞給 LogProps，例如 “forwardedRef”// 然后它就可以被掛載到被 LogProps 包裹的子組件上。return React.forwardRef((props, ref) => {return <LogProps {...props} forwardedRef={ref} />;}); }

注意：

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

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。