react框架的学习-8-16-2019

海星吧 2019-8-16 4834

新帖原本是应该昨天就发的。昨天写了三千多字,网站没有保存草稿功能,结果写了三个多小时的帖子付诸东流。。

宝宝心痛啊QAQ ,不过我还是重整旗鼓,决定,先在txt文件慢慢写。。。

其实重新写一遍帖子对自己的学习还是挺有帮助的对吧。嗯。。

React 的使用

安装react脚手架

打开终端cmd.exe

npm Install -g create-react-app

创建项目

打开一个文件夹

 create-react-app  项目名

运行react项目

打开项目文件夹

npm start


React 的文件夹

node-modules  项目依赖包

public   公共文件夹--index

src   视图层文件夹 

一般来说,react项目操作都是在src文件夹进行


现在我们来创建一个喜闻乐见的hello world.



首先在src文件夹中创建一个名为components的文件夹,

当然名字可以看你喜好,这个将作为存放组件的文件夹。


在components文件夹下创建一个Hello.js的文件


react组件的基本结构是这样的:


import React, { Component } from 'react';     //这个是声明这是一个react组件,‘, { Component }’可以看喜好加上


class Hello  extends React.Component{ //这是react组件的主体


}

export default Hello;//这是对外暴露组件


如果你不想这么写的话还有另一种方法:

export default class Hello  extends Component{  //直接暴露整个组件,不过不推荐使用这个方法。不好维护。


}


react的生命周期:

了解一个框架,首先得了解他的生命周期。

一般来说,生命周期大致上有三个:

组件创建时

组件更新时

组件卸载时


以下是详细的生命周期

//组件初始化阶段

constructor(props)


getDerivedStateFromProps()


componentWillMount()//在render()方法之前执行一次,通常使用constructor方法代替。


render()//-创建时-更新时//渲染页面的函数//New props  setState()  forceUpdate() 调用这三种函数时会触发更新


componentDidMount()


//更新阶段

componentWillReceiveProps()


getDerivedStateFromProps() 


shouldComponentUpdate() 


componentWillUpdate()


render()


getSnapshotBeforeUpdate()


componentDidUpdate()


//卸载时

componentWillUnmount()


//错误处理

componentDidCatch()


好了,这一篇就先介绍到这里,具体的生命周期我会在下一篇进行整理。

如果有任何意义上的错误或者你有什么可以补充的知识点欢迎下方留言,

我是海星吧,咱们下一篇见。




弱鸡程序员年底还在加班
最新回复 (4)
  • Hentai 2019-8-16
    0 2
    我的妈,里世界都是些什么人才?我就看懂了cmd😂
    已融合因果律线路,免疫一切诅咒( ̄へ ̄)
  • yu1324 2019-8-16
    0 3
    热爱学习(⑉°з°)-♡
    这个人很懒,什么也没有留下!
  • 海星吧 2019-8-16
    0 4
    Hentai 我的妈,里世界都是些什么人才?我就看懂了cmd😂
    就很普通的安装运行啊。。
    弱鸡程序员年底还在加班
  • 欧派兽 2019-8-16
    0 5
    奖励三级精华
    1:管理员给你移区后会显示移到了你之前发帖的区。 2:点击我作为楼主发帖时一楼下的图片签名,可以跳转到站规教程贴。 3:多次水贴水回复会封号哦? 4:不知道回什么的时候就点“里世界专属”,一键随机生成几种回复内容。 5:祝你在里世界玩得愉快!
    • ACG里世界
      6
          
返回
发新帖