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.这样可以让代码更易于理解

 

 

持续更新……欢迎点关注