React随手笔记~

作者: GeeFib | 来源:发表于2018-01-25 17:56 被阅读23次

    学习@胡子大哈的教程写评论框,做了一些自己需要注意的笔记

    附,胡子大哈的教程:http://huziketang.com/books/react/lesson1

    1、必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的

    2、事件名称都必须要用驼峰命名法。

    3、this.setState是异步进行的,如需要拿state进行计算则参考实例

    handleClickOnLikeButton () {

        this.setState((prevState) => {

          return { count: 0 }

        })

        this.setState((prevState) => {

          return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0,当前返回 1

        })

        this.setState((prevState) => {

          return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1,当前返回 3

        })

        // 最后的结果是 this.state.count 为 3

      }

    4、如果一个文件导出的是一个类,那么这个文件名就用大写开头。

    5、生命周期

    -> constructor()

    -> componentWillMount() Ajax 数据的拉取操作、一些定时器的启动等,就可以放在 componentWillMount

    -> render()

    // 然后构造 DOM 元素插入页面

    -> componentDidMount()

    // ...

    // 即将从页面中删除

    -> componentWillUnmount()

    // 从页面中删除

    6、定时器写在组件内要在组件unmount的时候清除

    7、componentWillUpdate里面不能使用setdata,会造成死循环

    8、组件的内容编写顺序如下:

    static 开头的类属性,如 defaultProps、propTypes。

    构造函数,constructor。

    getter/setter(还不了解的同学可以暂时忽略)。

    组件生命周期。

    _ 开头的私有方法。

    事件监听方法,handle*。

    render*开头的方法,有时候 render() 方法里面的内容会分开到不同函数里面进行,这些函数都以 render* 开头。

    render() 方法。

    相关文章

      网友评论

        本文标题:React随手笔记~

        本文链接:https://www.haomeiwen.com/subject/hlxbaxtx.html