新帖原本是应该昨天就发的。昨天写了三千多字,网站没有保存草稿功能,结果写了三个多小时的帖子付诸东流。。
宝宝心痛啊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()
好了,这一篇就先介绍到这里,具体的生命周期我会在下一篇进行整理。
如果有任何意义上的错误或者你有什么可以补充的知识点欢迎下方留言,
我是海星吧,咱们下一篇见。