robotfriend(二)

添加一些CSS样式

现在index.css把背景改成渐变色

React组件生命周期

和其他的组件比起来，APP.js有state,是一个smart component。
React 组件的生命周期函数，又叫钩子函数，它能响应不同的状态。

**Mounting：**已插入真实 DOM （start of app）
当 an instance of 组件被创造或者被插入DOM
检查的顺序：
constructor()
componentWillMount()
render()
componentDidMount()

**Updating：**正在被重新渲染
props或者state的变化导致updating
例子：机器人朋友搜索款如果输入名字，匹配到不同机器人，就会re-render
componentWillReceiveProps()
ShouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

**Unmounting：**已移出真实 DOM
当组件从DOM移除
componentDidUpdate()

当我们加上componentDidMount()

实际在控制台里出现的顺序是

mounting的顺序constructor render componentDidMount
但是在componentDidMount里面有setState就会进入到update
会re-render一次

如果是改成这样就是，一开始的什么都没有。然后显示机器人

fetch()是一个request方法。

如果一个机器人都没有，就显示loading

固定搜索框在顶端

子组件 children
新建一个scroll组件包裹住Cardlist
然后在函数里console.log(props)，虽然明明没有参数传递，但是默认包含了了children：Cardlist


因此我们可以直接在scroll函数里面定义cardlist的样式

最终效果是这样

如何归类那么多文件

两个文件夹，一个是components一个是containers
components:就是普通的组件
containers:是有state的smart component,pass states to components
包括 App.js App.css

部署我们的APP到github

参考react deployment








在robotsfriend的settings里面找到 github page

https://yunjia98wu.github.io/robotsfriend/