問題1：什么是虛擬DOM？

主題: React
難度: ?

虛擬 DOM (VDOM)是真實 DOM 在內(nèi)存中的表示。UI 的表示形式保存在內(nèi)存中，并與實際的 DOM 同步。這是一個發(fā)生在渲染函數(shù)被調(diào)用和元素在屏幕上顯示之間的步驟，整個過程被稱為調(diào)和。

寧洱網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
問題2：類組件和函數(shù)組件之間的區(qū)別是啥？

主題: React
難度: ??

類組件可以使用其他特性，如狀態(tài)state和生命周期鉤子。當(dāng)組件只是接收props渲染到頁面時，就是無狀態(tài)組件，就屬于函數(shù)組件，也被稱為啞組件或展示組件。

函數(shù)組件和類組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。

區(qū)別函數(shù)組件類組件是否有this沒有有是否有生命周期沒有有是否有狀態(tài)state沒有有問題 3：React 中 refs 干嘛用的？

主題: React
難度: ??

Refs提供了一種訪問在render方法中創(chuàng)建的 DOM 節(jié)點或者 React 元素的方法。在典型的數(shù)據(jù)流中，props是父子組件交互的唯一方式，想要修改子組件，需要使用新的pros重新渲染它。凡事有例外，某些情況下咱們需要在典型數(shù)據(jù)流外，強(qiáng)制修改子代，這個時候可以使用Refs。

咱們可以在組件添加一個ref屬性來使用，該屬性的值是一個回調(diào)函數(shù)，接收作為其第一個參數(shù)的底層 DOM 元素或組件的掛載實例。

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

請注意，input元素有一個ref屬性，它的值是一個函數(shù)。該函數(shù)接收輸入的實際 DOM 元素，然后將其放在實例上，這樣就可以在handleSubmit函數(shù)內(nèi)部訪問它。

經(jīng)常被誤解的只有在類組件中才能使用refs，但是refs也可以通過利用 JS 中的閉包與函數(shù)組件一起使用。

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

問題 4：在 React 中如何處理事件

主題: React
難度: ??

為了解決跨瀏覽器的兼容性問題，SyntheticEvent實例將被傳遞給你的事件處理函數(shù)，SyntheticEvent是 React 跨瀏覽器的瀏覽器原生事件包裝器，它還擁有和瀏覽器原生事件相同的接口，包括stopPropagation()和preventDefault()。

比較有趣的是，React 實際上并不將事件附加到子節(jié)點本身。React 使用單個事件偵聽器偵聽頂層的所有事件。這對性能有好處，也意味著 React 在更新 DOM 時不需要跟蹤事件監(jiān)聽器。

問題 5：state 和 props 區(qū)別是啥？

主題: React
難度: ??

props和state是普通的 JS 對象。雖然它們都包含影響渲染輸出的信息，但是它們在組件方面的功能是不同的。即

state是組件自己管理數(shù)據(jù)，控制自己的狀態(tài)，可變；props是外部傳入的數(shù)據(jù)參數(shù)，不可變；沒有state的叫做無狀態(tài)組件，有state的叫做有狀態(tài)組件；多用props，少用state，也就是多寫無狀態(tài)組件。問題 6：如何創(chuàng)建 refs

主題: React
難度: ??

Refs 是使用React.createRef()創(chuàng)建的，并通過ref屬性附加到 React 元素。在構(gòu)造組件時，通常將Refs分配給實例屬性，以便可以在整個組件中引用它們。

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

或者這樣用：

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

問題 7：什么是高階組件？

主題: React
難度: ??

高階組件(HOC)是接受一個組件并返回一個新組件的函數(shù)。基本上，這是一個模式，是從 React 的組合特性中衍生出來的，稱其為純組件，因為它們可以接受任何動態(tài)提供的子組件，但不會修改或復(fù)制輸入組件中的任何行為。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可以用于以下許多用例

代碼重用、邏輯和引導(dǎo)抽象渲染劫持state 抽象和操作props 處理問題 8：在構(gòu)造函數(shù)調(diào)用super并將props作為參數(shù)傳入的作用是啥？

主題: React
難度: ??

在調(diào)用super()方法之前，子類構(gòu)造函數(shù)無法使用this引用，ES6 子類也是如此。將props參數(shù)傳遞給super()調(diào)用的主要原因是在子構(gòu)造函數(shù)中能夠通過this.props來獲取傳入的props。

傳遞 props

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);  // { name: 'sudheer',age: 30 }
  }
}

沒傳遞 props

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
    // 但是 Props 參數(shù)仍然可用
    console.log(props); // Prints { name: 'sudheer',age: 30 }
  }

  render() {
    // 構(gòu)造函數(shù)外部不受影響
    console.log(this.props) // { name: 'sudheer',age: 30 }
  }
}

上面示例揭示了一點。props的行為只有在構(gòu)造函數(shù)中是不同的，在構(gòu)造函數(shù)之外也是一樣的。

問題 9：什么是控制組件？

主題: React
難度: ???

在 HTML 中，表單元素如<input>、<textarea>和<select>通常維護(hù)自己的狀態(tài)，并根據(jù)用戶輸入進(jìn)行更新。當(dāng)用戶提交表單時，來自上述元素的值將隨表單一起發(fā)送。

而 React 的工作方式則不同。包含表單的組件將跟蹤其狀態(tài)中的輸入值，并在每次回調(diào)函數(shù)(例如onChange)觸發(fā)時重新渲染組件，因為狀態(tài)被更新。以這種方式由 React 控制其值的輸入表單元素稱為受控組件。

問題 10：如何 React.createElement ？

主題: React
難度: ???

問題：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)

上述代碼如何使用React.createElement來實現(xiàn):

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

問題 11：講講什么是 JSX ？

主題: React
難度: ???

當(dāng) Facebook 第一次發(fā)布 React 時，他們還引入了一種新的 JS 方言JSX，將原始 HTML 模板嵌入到 JS 代碼中。JSX 代碼本身不能被瀏覽器讀取，必須使用Babel和webpack等工具將其轉(zhuǎn)換為傳統(tǒng)的JS。很多開發(fā)人員就能無意識使用 JSX，因為它已經(jīng)與 React 結(jié)合在一直了。

class MyComponent extends React.Component {
  render() {
    let props = this.props;return (
      <p className="my-component">
      <a href={props.url}>{props.name}</a>
      </p>
    );
  }
}

問題 12：根據(jù)下面定義的代碼，可以找出存在的兩個問題嗎 ？

主題: React
難度: ???

請看下面的代碼：

答案：

1.在構(gòu)造函數(shù)沒有將props傳遞給super，它應(yīng)該包括以下行

constructor(props) {
  super(props);
  // ...
}

2.事件監(jiān)聽器(通過addEventListener()分配時)的作用域不正確，因為 ES6 不提供自動綁定。因此，開發(fā)人員可以在構(gòu)造函數(shù)中重新分配clickHandler來包含正確的綁定:

constructor(props) {
  super(props);
  this.clickHandler = this.clickHandler.bind(this);
  // ...
}

問題 13：為什么不直接更新state呢 ?

主題: React
難度: ???

如果試圖直接更新state，則不會重新渲染組件。

// 錯誤
 This.state.message = 'Hello world';

需要使用setState()方法來更新state。它調(diào)度對組件state對象的更新。當(dāng)state改變時，組件通過重新渲染來響應(yīng)：

// 正確做法
This.setState({message: ‘Hello World’});

問題 14：React 組件生命周期有哪些不同階段？

主題: React
難度: ???

在組件生命周期中有四個不同的階段：

Initialization：在這個階段，組件準(zhǔn)備設(shè)置初始化狀態(tài)和默認(rèn)屬性。Mounting：react 組件已經(jīng)準(zhǔn)備好掛載到瀏覽器 DOM 中。這個階段包括componentWillMount和componentDidMount生命周期方法。Updating：在這個階段，組件以兩種方式更新，發(fā)送新的 props 和 state 狀態(tài)。此階段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。Unmounting：在這個階段，組件已經(jīng)不再被需要了，它從瀏覽器 DOM 中卸載下來。這個階段包含componentWillUnmount生命周期方法。

除以上四個常用生命周期外，還有一個錯誤處理的階段：

Error Handling：在這個階段，不論在渲染的過程中，還是在生命周期方法中或是在任何子組件的構(gòu)造函數(shù)中發(fā)生錯誤，該組件都會被調(diào)用。這個階段包含了componentDidCatch生命周期方法。

問題 15：React 的生命周期方法有哪些？

主題: React
難度: ???

componentWillMount:在渲染之前執(zhí)行，用于根組件中的 App 級配置。componentDidMount：在第一次渲染之后執(zhí)行，可以在這里做AJAX請求，DOM 的操作或狀態(tài)更新以及設(shè)置事件監(jiān)聽器。componentWillReceiveProps：在初始化render的時候不會執(zhí)行，它會在組件接受到新的狀態(tài)(Props)時被觸發(fā)，一般用于父組件狀態(tài)更新時子組件的重新渲染shouldComponentUpdate：確定是否更新組件。默認(rèn)情況下，它返回true。如果確定在state或props更新后組件不需要在重新渲染，則可以返回false，這是一個提高性能的方法。componentWillUpdate：在shouldComponentUpdate返回true確定要更新組件之前件之前執(zhí)行。componentDidUpdate：它主要用于更新DOM以響應(yīng)props或state更改。componentWillUnmount：它用于取消任何的網(wǎng)絡(luò)請求，或刪除與組件關(guān)聯(lián)的所有事件監(jiān)聽器。問題 16：這三個點(...)在 React 干嘛用的？

主題: React
難度: ???

...在React（使用JSX）代碼中做什么？它叫什么？

<Modal {...this.props} title='Modal heading'  animation={false}/>

這個叫擴(kuò)展操作符號或者展開操作符，例如，如果this.props包含a：1和b：2，則

<Modal {...this.props} title='Modal heading' animation={false}>

等價于下面內(nèi)容：

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

擴(kuò)展符號不僅適用于該用例，而且對于創(chuàng)建具有現(xiàn)有對象的大多數(shù)（或全部）屬性的新對象非常方便，在更新state咱們就經(jīng)常這么做：

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

問題 17：使用 React Hooks 好處是啥？

主題: React
難度: ???

首先，Hooks 通常支持提取和重用跨多個組件通用的有狀態(tài)邏輯，而無需承擔(dān)高階組件或渲染props的負(fù)擔(dān)。Hooks可以輕松地操作函數(shù)組件的狀態(tài)，而不需要將它們轉(zhuǎn)換為類組件。

Hooks 在類中不起作用，通過使用它們，咱們可以完全避免使用生命周期方法，例如componentDidMount、componentDidUpdate、componentWillUnmount。相反，使用像useEffect這樣的內(nèi)置鉤子。

問題 18：什么是 React Hooks？

主題: React
難度: ???

Hooks是 React 16.8 中的新添加內(nèi)容。它們允許在不編寫類的情況下使用state和其他 React 特性。使用 Hooks，可以從組件中提取有狀態(tài)邏輯，這樣就可以獨立地測試和重用它。Hooks 允許咱們在不改變組件層次結(jié)構(gòu)的情況下重用有狀態(tài)邏輯，這樣在許多組件之間或與社區(qū)共享 Hooks 變得很容易。

問題 19：React 中的useState()是什么？

主題: React
難度: ???

下面說明useState(0)的用途：

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

useState是一個內(nèi)置的 React Hook。useState(0)返回一個元組，其中第一個參數(shù)count是計數(shù)器的當(dāng)前狀態(tài)，setCounter提供更新計數(shù)器狀態(tài)的方法。

咱們可以在任何地方使用setCounter方法更新計數(shù)狀態(tài)-在這種情況下，咱們在setCount函數(shù)內(nèi)部使用它可以做更多的事情，使用 Hooks，能夠使咱們的代碼保持更多功能，還可以避免過多使用基于類的組件。

問題 20：React 中的StrictMode(嚴(yán)格模式)是什么？？

主題: React
難度: ???

React 的StrictMode是一種輔助組件，可以幫助咱們編寫更好的 react 組件，可以使用<StrictMode />包裝一組組件，并且可以幫咱們以下檢查：

驗證內(nèi)部組件是否遵循某些推薦做法，如果沒有，會在控制臺給出警告。驗證是否使用的已經(jīng)廢棄的方法，如果有，會在控制臺給出警告。通過識別潛在的風(fēng)險預(yù)防一些副作用。問題 21：為什么類方法需要綁定到類實例？

主題: React
難度: ???

在 JS 中，this值會根據(jù)當(dāng)前上下文變化。在 React 類組件方法中，開發(fā)人員通常希望this引用組件的當(dāng)前實例，因此有必要將這些方法綁定到實例。通常這是在構(gòu)造函數(shù)中完成的:

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

問題 22：什么是 prop drilling，如何避免？

主題: React
難度: ???

在構(gòu)建 React 應(yīng)用程序時，在多層嵌套組件來使用另一個嵌套組件提供的數(shù)據(jù)。最簡單的方法是將一個prop從每個組件一層層的傳遞下去，從源組件傳遞到深層嵌套組件，這叫做prop drilling。

prop drilling的主要缺點是原本不需要數(shù)據(jù)的組件變得不必要地復(fù)雜，并且難以維護(hù)。

為了避免prop drilling，一種常用的方法是使用React Context。通過定義提供數(shù)據(jù)的Provider組件，并允許嵌套的組件通過Consumer組件或useContextHook 使用上下文數(shù)據(jù)。

問題 23：描述 Flux 與 MVC？

主題: React
難度: ???

傳統(tǒng)的 MVC 模式在分離數(shù)據(jù)(Model)、UI(View和邏輯(Controller)方面工作得很好，但是 MVC 架構(gòu)經(jīng)常遇到兩個主要問題:

數(shù)據(jù)流不夠清晰:跨視圖發(fā)生的級聯(lián)更新常常會導(dǎo)致混亂的事件網(wǎng)絡(luò)，難于調(diào)試。

缺乏數(shù)據(jù)完整性:模型數(shù)據(jù)可以在任何地方發(fā)生突變，從而在整個UI中產(chǎn)生不可預(yù)測的結(jié)果。

使用 Flux 模式的復(fù)雜用戶界面不再遭受級聯(lián)更新，任何給定的React 組件都能夠根據(jù)store提供的數(shù)據(jù)重建其狀態(tài)。Flux 模式還通過限制對共享數(shù)據(jù)的直接訪問來加強(qiáng)數(shù)據(jù)完整性。

問題 24：受控組件和非受控組件區(qū)別是啥？

主題: React
難度: ???

受控組件是 React 控制中的組件，并且是表單數(shù)據(jù)真實的唯一來源。非受控組件是由 DOM 處理表單數(shù)據(jù)的地方，而不是在 React 組件中。

盡管非受控組件通常更易于實現(xiàn)，因為只需使用refs即可從 DOM 中獲取值，但通常建議優(yōu)先選擇受控制的組件，而不是非受控制的組件。

這樣做的主要原因是受控組件支持即時字段驗證，允許有條件地禁用/啟用按鈕，強(qiáng)制輸入格式。

問題 25：這段代碼有什么問題嗎？

主題: React
難度: ????

這段代碼有什么問題:

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})

答案：

沒有什么問題。這種方式很少被使用，咱們可以將一個函數(shù)傳遞給setState，該函數(shù)接收上一個state的值和當(dāng)前的props，并返回一個新的狀態(tài)，如果咱們需要根據(jù)以前的狀態(tài)重新設(shè)置狀態(tài)，推薦使用這種方式。

問題 26：什么是 React Context?

主題: React
難度: ????

Context通過組件樹提供了一個傳遞數(shù)據(jù)的方法，從而避免了在每一個層級手動的傳遞props屬性。

問題 27：什么是 React Fiber?

主題: React
難度: ????

Fiber 是 React 16 中新的協(xié)調(diào)引擎或重新實現(xiàn)核心算法。它的主要目標(biāo)是支持虛擬DOM的增量渲染。React Fiber 的目標(biāo)是提高其在動畫、布局、手勢、暫停、中止或重用等方面的適用性，并為不同類型的更新分配優(yōu)先級，以及新的并發(fā)原語。

React Fiber 的目標(biāo)是增強(qiáng)其在動畫、布局和手勢等領(lǐng)域的適用性。它的主要特性是增量渲染:能夠?qū)秩竟ぷ鞣指畛蓧K，并將其分散到多個幀中。

問題 28：如何在 ReactJS 的 Props上應(yīng)用驗證？

主題: React
難度: ????

當(dāng)應(yīng)用程序在開發(fā)模式下運(yùn)行時，React 將自動檢查咱們在組件上設(shè)置的所有props，以確保它們具有正確的數(shù)據(jù)類型。對于不正確的類型，開發(fā)模式下會在控制臺中生成警告消息，而在生產(chǎn)模式中由于性能影響而禁用它。強(qiáng)制的props用isRequired定義的。

下面是一組預(yù)定義的 prop 類型:

React.PropTypes.stringReact.PropTypes.numberReact.PropTypes.funcReact.PropTypes.nodeReact.PropTypes.bool

例如，咱們?yōu)橛脩艚M件定義了如下的propTypes

import PropTypes from 'prop-types';

class User extends React.Component {
  render() {
    return (
      <h1>Welcome, {this.props.name}</h1>
      <h2>Age, {this.props.age}
    );
  }
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired
};

問題 29：在 React 中使用構(gòu)造函數(shù)和 getInitialState 有什么區(qū)別？

主題: React
難度: ????

構(gòu)造函數(shù)和getInitialState之間的區(qū)別就是ES6和ES5本身的區(qū)別。在使用ES6類時，應(yīng)該在構(gòu)造函數(shù)中初始化state，并在使用React.createClass時定義getInitialState方法。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

等價于：

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

問題 30：如何有條件地向 React 組件添加屬性？

主題: React
難度: ????

對于某些屬性，React 非常聰明，如果傳遞給它的值是虛值，可以省略該屬性。例如：

var InputComponent = React.createClass({
    render: function() {
      var required = true;
      var disabled = false;

      return (
        <input type="text" disabled={disabled} required={required} />
      );
    }
});

渲染結(jié)果：

<input type="text" required>

另一種可能的方法是：

var condition = true;

var component = (
  <p
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

問題 31：Hooks會取代render props和高階組件嗎？

主題: React
難度: ????

通常，render props和高階組件僅渲染一個子組件。React團(tuán)隊認(rèn)為，Hooks 是服務(wù)此用例的更簡單方法。

這兩種模式仍然有一席之地(例如，一個虛擬的scroller組件可能有一個renderItem prop，或者一個可視化的容器組件可能有它自己的 DOM 結(jié)構(gòu))。但在大多數(shù)情況下，Hooks 就足夠了，可以幫助減少樹中的嵌套。

問題 32：如何避免組件的重新渲染？

主題: React
難度: ????

React 中最常見的問題之一是組件不必要地重新渲染。React 提供了兩個方法，在這些情況下非常有用：

React.memo():這可以防止不必要地重新渲染函數(shù)組件PureComponent:這可以防止不必要地重新渲染類組件

這兩種方法都依賴于對傳遞給組件的props的淺比較，如果props沒有改變，那么組件將不會重新渲染。雖然這兩種工具都非常有用，但是淺比較會帶來額外的性能損失，因此如果使用不當(dāng)，這兩種方法都會對性能產(chǎn)生負(fù)面影響。

通過使用 React Profiler，可以在使用這些方法前后對性能進(jìn)行測量，從而確保通過進(jìn)行給定的更改來實際改進(jìn)性能。

問題 33：什么是純函數(shù)？

主題: React
難度: ?????

純函數(shù)是不依賴并且不會在其作用域之外修改變量狀態(tài)的函數(shù)。本質(zhì)上，純函數(shù)始終在給定相同參數(shù)的情況下返回相同結(jié)果。

問題 34：當(dāng)調(diào)用setState時，Reactrender是如何工作的？

主題: React
難度: ?????

咱們可以將"render"分為兩個步驟：

虛擬 DOM 渲染:當(dāng)render方法被調(diào)用時，它返回一個新的組件的虛擬 DOM 結(jié)構(gòu)。當(dāng)調(diào)用setState()時，render會被再次調(diào)用，因為默認(rèn)情況下shouldComponentUpdate總是返回true，所以默認(rèn)情況下 React 是沒有優(yōu)化的。原生 DOM 渲染:React 只會在虛擬DOM中修改真實DOM節(jié)點，而且修改的次數(shù)非常少——這是很棒的React特性，它優(yōu)化了真實DOM的變化，使React變得更快。問題 35：如何避免在React重新綁定實例？

主題: React
難度: ?????

有幾種常用方法可以避免在 React 中綁定方法：

1.將事件處理程序定義為內(nèi)聯(lián)箭頭函數(shù)

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
  }

  render() {
    return (
      <button onClick={() => {
        this.setState({ isFormSubmitted: true });
      }}>Submit</button>
    )
  }
}

2.使用箭頭函數(shù)來定義方法：

class SubmitButton extends React.Component {
  state = {
    isFormSubmitted: false
  }

  handleSubmit = () => {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

3.使用帶有 Hooks 的函數(shù)組件

const SubmitButton = () => {
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);

  return (
    <button onClick={() => {
        setIsFormSubmitted(true);
    }}>Submit</button>
  )
};

本文轉(zhuǎn)載自：https://segmentfault.com/a/1190000020912300

相關(guān)教程推薦：React視頻教程

新聞標(biāo)題：React必知必會的35個面試題
當(dāng)前路徑：http://vcdvsql.cn/article42/chohec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、小程序開發(fā)、網(wǎng)頁設(shè)計公司、云服務(wù)器、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)