前端学习

1,node_modules third part library
2, app component basic component
3, babel 把jsx转成js
4, hot module reloading 热更新
5, index.html 全部开始页面, app是react开始的
6, 代替无效的div

7, key是react用的, 只针对列表

8, import react 是用jsx
import reactDom 是render

9, 回调函数，constructor，render，mount，domponentDidUpdate,componentWillunmount

10, class组件/ 函数式组件

11, jsx中写了html，后面现写js逻辑代码，要{}，注意，例如变量：{object}，分清楚哪里是写js，哪里是写html

12, jax相当于一个组件，组合了css，js，html

13, 父类不可以在子类里面加标签，其实可以，算插槽，轮播图中复用

 14,react基于状态感知，要修改state，要想java那样，创建一个新的对象，setState，一个类里面也是不允许修改的, 但可以拿，这是因为setState里面调用了render，不用这个他不知道

　　要用深拷贝：let newList = [...oldList], 或者this.oldList.slice()

　　setState在同步代码中是异步执行,比如说平时的增删查改，可以写在回调函数中

　　setState在异步代码中是同步执行，比如说setTimeout，ajax

15, class已经成了关键字，用className代替

16, this问题，在对象中传递会变，用箭头函数绑定

17, 事件调用

 18，button拿到input的值，相比于改变状态，有点像jquery的拿值

 19，增加用push，删除用splice, filter

 20，dangerouslySetinnerHtml 可以输出带js，html的语句

21, 输入框值改变，onInput像onClick一样

22, jsx的Boolean写法，{false},{true}

23,类属性，相当于java的静态变量，和属性验证

 24，默认属性

 25，默认值，input里面的value改了defaultValue

26,

    let a = {
        person:{
            name:"ken",
            tall:180
        }
    }
    let {person} = a
const [x,y] = [11,12]

27, 其他通信模式：订阅发布，context方案

28，生命周期函数，shouldComponentUpdate如果很多子结点，可以让他不render来优化

　　父节点更新setState，子节点引发componentwillreceiveprops

　　getDerivedStateFromProps 新建或者修改都改,代替willMount和componentWillReceiveProps

　　getSnapshotBeforeUpdate 代替componentWillUpdate

29, import   要看具体工具，像bootstrap直接引入css，像其他工具还要初始化有时候

30.swiper

31，css重复影响，用module.css

--------------------------------------

css

css: height, width 这些可以百分数，px，em（几倍的px）
fontSize
fontWeight: "bold"
badge

class用 .className

id用#myapp

float:left: html是向下的，这个是让他浮动起来

width：100这个可以把图片限定在一面

display：flex，让他从左到右编排

position:sticky， top：0 滑动吸顶

position: fixed是CSS固定定位，一般用于导航栏吸顶效果。该属性使用的时候要注意一些细节：