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

 

 

持续更新……欢迎点关注