你必须知道的React的知识点：单向数据流，高性能虚拟DOM，组件间的数据交互，事件与数据的双向绑定，生命周期钩子，fetch：数据请求等

1、React调试工具：React Developer Tools

2、React开发工具：Atom

3、React UI库：Material-UI / Ant Deaign

4、React适用场景：数据不断变化的大型应用程序

5、前端UI构建方式：数据模型、UI界面

6、单向数据流：数据模型驱动UI界面（从数据到视图的数据流动）

7、高性能虚拟DOM：

• 虚拟DOM是在浏览器端用JS实现了一套DOM API

• 每当数据变化时，React会重新构建整个DOM树，并将当前的树和上一次的DOM树进行对比，得到DOM结构的区别。然后仅仅将需要变化的部分进行实际的浏览器DOM更新

• 而且，React能够批处理虚拟DOM的刷新，在上一个事件循环内两次数据变化会被合并

• 虽然每次都要构造完整的虚拟DOM树，但因为它是内存数据，性能极高，对实际DOM的操作，仅仅是Diff部分

8、组件：将UI拆成不同的组件，每个组件独立封装，每个组件只关心自己的逻辑，彼此独立。组件应具备特征：可组合、可复用、可维护、可测试

9、组件间的数据交互：

• state：自身属性的初始化赋值

• • 作用域：只会管理当前的这个Class作用域，不会污染其他模块

  • this.state.xxx更改了state里的数据，但是不会改变视图

  • this.setState({xxx: changeXxx})会立即引起页面的重绘，Diff运算后只更改数据变化的地方。

• props：外来属性的管理

• • 构造函数construtor里的super：调用基类所有的初始化方法

  • 用于初始化子组件数据

  • React 认为，props属性应该是只读的，一旦赋值过去就不要再变化了

  • 在开始和结束标签之间放入一个字符串，则props.children就是那个字符串。（传递给自定义组件的子代可以是任何元素，只要该组件在React渲染前将其转换成React能够理解的东西）

• construtor定义的属性：this.xxx

• • 该属性改变不会引发视图的改变，并且属于当前类Class的作用域

  • 可定义的值：只在本组件内使用且不需要改变视图的值

• 在当前组件里，但是在类Class外面定义的变量：const xxx = ''

• • 该属性改变不会引发视图改变，并且属于当前组件的作用域

10、事件与数据的双向绑定：子组件向父组件传递数据

• 普通函数需要手动绑定this，不然函数里的this指向会有问题：onClick={this.changeEvent.bind(this)}（或者使用箭头函数）

• 子组件调用父组件的函数：实现子组件向父组件传递参数

在子页面中通过 调用父页面传递过来的事件 props 进行组件间的参数传递

子组件：ChildComponent



父组件：

handleChildChange (event) {

    this.setState({

        age: event.target.value

    })

}

 

11、component 对外来属性进行验证和约束：

• defaultProps：设置属性的默认值，避免prop未传值时报错

• propType：对属性进行验证和约束

• • 当为prop提供无效值时，控制台将显示警告。

  • 出于性能原因，仅在开发模式下检查propTypes。

  • propType类型检查发生在defaultProps解析之后，因此检查类型也将应用于defaultProps

  • 注意：React.PropTypes自React v15.5起已弃用，请使用prop-types库代替

import React, { Component } from ‘react'

import PropTypes from 'prop-types’



class ChildClass extends Component {

    static propTypes = {

        data: PropTypes.object.isRequired // data为对象且必传

    }

    static defaultProps = {

        data: {}

    }

}

12、生命周期钩子

• getDefaultProps()

• getInitialState()

• componentWillMount()

• render()：first time

• componentDidMount()

• componentWillReceiveProps(nextProps)

• shouldComponentUpdate(nextProps, nexrState)

• componentWillUpdate(nextProps, nexrState)

• render()：after first time，会执行componentDidUpdate、componentWillUnmount

• componentDidUpdate()

• componentWillUnmount()

• 栗子(生命周期执行顺序)：父组件componentWillMount() => 子组件componentWillMount() => 子组件componentDidMount() => 父组件componentDidMount()

13、fetch：数据请求【详情看ES6：node-fetch笔记】

• get 请求：( method: ‘GET’ )

• • 参数传递：把参数拼接在URL上

• post 请求：( method: ‘POST’ ) 

• • POST 请求的参数一定不能放URL中，为防止信息泄漏

  • 参数传递：body：JSON.stringify(obj)

  • ‘Content-Type’: ‘application/json'

  • 返回的 Promise 对象 res.text() // 返回字符串

sedGet = async (url = '', params) => { // GET 请求

    let urlParams = ‘'

    if (params && Object.prototype.toString.call(params) === '[object Object]') {

        let paramsArray = []

        Object.keys(params).forEach(key => params[key] && paramsArray.push(key + ‘=‘ + params[key]));

        if (urlParams.search(/\?/) === -1) {

            urlParams += ‘?’ + paramsArray.join(‘’&);

        } else {

            urlParams += ‘&’ + parsmsArray.join(‘&’);

        }

    }

    let res = await fetch(`${HTTP + url + urlParams}`,

        {

            credentials: ‘include'

        });

    let response = await res.json();

    return response

}
handleSubmit = async () => { // 或者用不用async语法糖，用this.sedGet.then()也可以，因为返回的是一个 promise 对象。若两者都不用，直接调用报错。

    // 调用 sedGet 函数并传参

    let response = await this.sedGet(url, params)

    // 对 response 数据进行逻辑处理

}

 

14、Router

15、Mixins：独立组件间共享Mixins

16、ref：操作节点

17、Css模块化：PostCss

18、JSX内置表达式

 

React 文档：https://doc.react-china.org/docs