书格前端

Reactjs的常见问题

Reactjs的常见问题

React的FAQ，来自官网的FAQ，学习后做的笔记，顺带翻译(不完全翻译)

AJAX and APIs

libaraies

你可以在React中使用任何你喜欢的AJAX库

Axio, jQuery AJAX, window.fetch

where did ajax call

componentDidMount

Babel, JSX, and Build Steps

JSX是否必要

不必要

ES6(+)是否必要

不必要

如何在JSX中写注释

支持多行注释

<div>
    {/* Comment goes here */}
    Hello, {name}!
</div>

Passing Functions to Components

如何传递event handler到一个组件

<button onClick={this.handleClick}>

如果在handler中要访问父组件，需要在组件实例中绑定函数

如何绑定函数到一个组件实例

There are several ways to make sure functions have access to component attributes like this.props and this.state, depending on which syntax and build steps you are using.

Bind in Constructor(ES2015)

class Foo extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        console.log('Click happend');
    }
    render() {
        return <button onClick={this.handleClick}>Click Me</button>
    }
}

Class Properties (Stage 3 Proposal)

class Foo extends Component {
    handleClick = () => {
        console.log('Click happend');
    }
    render() {
        return <button onClick={this.handleClick}>Click Me</button>
    }
}

Bind in Render

class Foo extends Component {
    handleClick() {
        console.log('Click happend');
    }
    render() {
        return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
    }
}

Arrow Function in Render

class Foo extends Component {
    handleClick() {
        console.log('Click happened');
    }
    render() {
        return <button onClick={() => this.handleClick()}>Click Me</button>;
    }
}

Component State

setState做什么用？

setState()安排更新一个组件的state对象。当状态改变时，组件会响应并重新渲染。

state和props之间有什么区别？

props(“properties”的缩写)和state均是纯粹的JavaScript对象。虽然都拥有可以影响渲染输出的信息，但有有一个非常重要的区别： props由外部传递到组件(类似函数参数)，而state是组件内部管理(类似函数内声明的变量)。

深入阅读何时使用props vs state:

为什么setState给了错误的值？

在React中，this.props和this.state代表渲染值，比如当前在屏幕中的内容。

调用setState是异步的，调用setState后，不要依赖this.state立即反馈新的值。如果你需要基于当前的state来计算值，传递一个更新函数代替一个对象。

incrementCount() {
    this.setState((state) => {
        // Important read `state` instead of `this.state` when updating
        return {count: state.count + 1}
    });
}

handleSomething() {
    // Let's say `this.state.count` starts at 0.
    this.incrementCount();
    this.incrementCount();
    this.incrementCount();
    
    // If you read `this.state.count` now, it would still be 0.
    // But when React re-renders the component, it will be 3.
}

Styling and CSS

如何添加CSS类到组件中？

传递一个字符串到className属性中：

render() {
    return <span className="menu navigation-menu">Menu</span>
}

依赖于组件属性和状态的CSS类：

render() {
    let className = 'menu';
    if (this.props.isActive) {
        className += ' menu-active';
    }
    return <span className={className}>Menu</span>
}

组装class可以使用包 classnames

File Structure

Virtual DOM and Internals

虚拟DOM是一个编程概念，是一种保持在内存中的理想化的、虚拟的UI表示，并且通过类似ReactDOM的库来和真实的DOM同步。这个过程称作reconciliation（重新调解）。

Shadow DOM和Virtual DOM是否一样？

不一样。Shadow DOM是一项浏览器技术，设计主要用于在web component中的局部变量和CSS。virtual DOM是一个使用基于浏览器API的JavaScript库实现的概念。

什么是”React Fiber”？

Fiber是在React 16中新的reconciliation的引擎。主要目标是使虚拟DOM的增量渲染变得可行。