React注意事項文檔摘錄，可作面試題

這裏是一些使用React時候須要注意的一些點，你能夠在看的時候自行加上「爲何？」「React是不能夠...?」這樣就能夠變成面試題了

１．We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.

 

爲了代碼易於閱讀咱們會把JSX分隔到多行，這個時候要注意在外部使用"()"括起來

 

２．Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

在JSX中給屬性賦值的時候要麼使用雙引號賦值一個字符串類型的值要麼使用花括號賦值一個表達式不能即便用了雙引號裏面又使用了花括號

 

３．These objects are called 「React elements」. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.

 

React元素（React element）對象是用來描述你想在屏幕上顯示什麼的，React會讀取元素對象信息用於構造Dom元素並保證React元素改變是Dom元素也相應改變

 

4.React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

 

React元素是不可變的，一旦建立你就不能再修改它的屬性和子元素了。一個元素就像電影中的一個幀同樣，它表明的是界面在一個特定時間點的顯示狀態。

 

5.Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

 

組件的名稱必須首字母大寫，由於小寫的React會當成普通的dom標籤如：<div/>　React會把它當作dom標籤處理,<Welcome/>React會把它當作自定義組件處理

 

6.Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props. 

 

props是隻讀的也就是不能改變的，不管你是用函數仍是使用的類定義的組件，都不能修改組件的props。

 

7.In applications with many components, it’s very important to free up resources taken by the components when they are destroyed.

 

在組件銷燬的時候釋放組件持有的資源時候頗有必要的，好比清除在組件中設定的定時器

 

8.Do Not Modify State Directly

For example, this will not re-render a component:

// Wrong this.state.comment = 'Hello';

Instead, use setState():

// Correct this.setState({comment: 'Hello'});

The only place where you can assign this.state is the constructor.

 

不要直接修改State的值，由於這樣不會引發組件從新渲染，當你須要修改state值時須要使用State的setState方法。你有且只有在組件的構造方法中才能使用等號賦值的形式修改state的值

 

9.State Updates May Be Asynchronous

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

 

State多是異步更新的，React爲了提升性能可能會把屢次setState的調用合併到一塊兒執行。也就是說若是你須要根據先前的state值修改當前的state值，直接使用this.state的形式獲取當前的state值可能不許確，這個時候你須要使用一個函數調用setState方法，這個函數有倆個參數一個是state一個是props。

 

10.State Updates are Merged

When you call setState(), React merges the object you provide into the current state.

 

當你調用setState更新State值時，更新是合併更新的形式，而不是所有替換。也就是會把setState中提供的參數合併到原來的State中而不是把原來的State整個替換掉

 

11.return ( <button onClick={() => this.handleClick()}> Click me </button> );

The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

 

使用{() => this.handleClick()}這種形式爲組件添加事件時，每一次組件渲染這個事件監聽函數就會從新建立，這樣若是這個事件監聽函數也是傳給子組件用的，就有會引發子組件的從新渲染。

 

12.<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

 

The above two lines are equivalent, and use arrow functions and Function.prototype.bind respectively.

In both cases, the e argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with bind any further arguments are automatically forwarded.

 

在註冊事件處理函數時，若是須要用到額外的數據作爲參數，上面的兩種形式都是能夠的，不一樣的是第一種的事件e是顯示傳遞給處理函數的而第二種是隱式傳遞給處理函數的。

 

13.if statements and for loops are not expressions in JavaScript, so they can’t be used in JSX directly. Instead, you can put these in the surrounding code. For example:

function NumberDescriber(props) { let description; if (props.number % 2 == 0) { description = <strong>even</strong>; } else { description = <i>odd</i>; } return <div>{props.number} is an {description} number</div>; }

在JavaScript中if和for都不是表達式所以不能直接在JSX中使用，可是你能夠在JSX周圍使用，也能夠在JSX中使用&&實現條件判斷

 

14.Props Default to 「True」

If you pass no value for a prop, it defaults to true. These two JSX expressions are equivalent:

<MyTextBox autocomplete /> <MyTextBox autocomplete={true} />

 

在JSX中若是沒有給一個屬性賦值，這個屬性的值默認是true

 

15.Booleans, Null, and Undefined Are Ignored

false, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

<div /> <div></div> <div>{false}</div> <div>{null}</div> <div>{undefined}</div> <div>{true}</div>

 

false,null,undefined還有true雖然均可以作爲標籤的內容，可是不會被渲染出來。

 

16.Only Call Hooks at the Top Level

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

 

只能在函數的頂層調用hook也就是不能在循環語句條件表達式或者嵌套的函數中調用，由於這樣可能會改變hook調用的順序，而React內部是按照hook的調用順序跟維護的State值對應的。

 

17.Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions. Instead, you can:

• ✅ Call Hooks from React function components.
• ✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).

By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.

 

只能在使用函數定義的React組件或者是自定義的hook中調用hook.這樣可以讓代碼更易於理解

 

 

持續更新……歡迎點關注