阅读React官方Doc笔记

发表于 | 阅读

React Doc 地址

1.false, null, undefined, and true are valid children. They simply don’t render. some ‘falsy’ values, such as the 0 number, are still rendered by React

1
2
3
4
5
<div>
    {props.messages.length &&
        <MessageList messages={props.messages} />
    }
</div>

如果 props.messages.length === 0, 则会渲染出

1
2
3
<div>
    0
</div>

需要注意的是： const res = true && 1 && 'haha' && 0, 这种写法 res 是等于0 而不是 false

2.ref、key 是不能通过props直接传递给组件的。ref 需要通过 React.createRef 来传递。

3.You may not use the ref attribute on functional components because they don’t have instances.

不能在函数式组件上使用ref属性，因为函数式组件没有实例。

You can, however, use the ref attribute inside a functional component as long as you refer to a DOM element or a class component。

4.关于Controlled Component 和 Uncontrolled Component，可以查看此文档:
Controlled and uncontrolled form inputs in React don’t have to be complicated

5.React.Children相关，可查看全面解析children在react中的应用

6.如果多次调用setState,则React更新state的顺序和调用setState的顺序相同。具体可查看 stack overflow 上的问题： Does React keep the order for state updates?

7.在同一个cycle中多次调用setState,如下所示：

1
2
3
this.setState({quantity: state.quantity + 1})
this.setState({quantity: state.quantity + 1})
this.setState({quantity: state.quantity + 1})

相当于执行了

1
2
3
4
5
6
Object.assign(
    previousState,
    {quantity: state.quantity + 1},
    {quantity: state.quantity + 1},
    ...
)

Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the current state, we recommend using the updater function form, instead:

1
2
3
this.setState((state) => {
    return {quantity: state.quantity + 1};
});

8.服务端渲染相关文档

9.in React, all DOM properties and attributes (including event handlers) should be camelCased. The exception is aria- and data- attributes, which should be lowercased. For example, you can keep aria-label as aria-label.

10.React 实现了一个“合成事件”层，这个事件层消除了 IE 与 W3C 标准实现之间的兼容问题。首先区分原生事件与合成事件，我们在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件，使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener，所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”。 “合成事件”会以事件委托（event delegation）的方式绑定到组件最上层，并且在组件卸载（unmount）的时候自动销毁绑定的事件。

Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

具体可以参考 React事件初探

不能使用异步的方式接收事件,详情查看 Event Pooling