REACT 学习

 

react 

react   组件实例的三大属性  state  props  refs 

方法用箭头函数改this 的指向

 

 

class 

类中所有定义的方法在局部都开启了严格模式 use strict

 

 class Person{
           
            a = "测试"
            constructor(){

            }

            say(){
                 
                console.log(this)

            }

        }

       const p1 = new Person()
        
       const x = p1.say

       x()  // undefined

 

 

 

 

 

类里面能写那些代码

构造器  自定义方法  赋值语句

 

react 生命周期

挂载

 构造器 constructor()  组件将要挂载 componentWillMount()  挂载 render()   组件挂载完毕 componentDidMount()  组件将要卸载 componentWillUnmount()

setState()

更新

控制组件更新 shouldComponentUpdate(){return true}   组件将要更新 componentWillUpdate()   更新 render()   组件更新完毕 componentDidUpdate()

强制更新

forceUpdate()

组件将要更新 componentWillUpdate()  更新 render()  组件更新完毕 componentDidUpdate()

父组件更新

子组件 将要接收到props

componentWillReceiveProps()  (第一次不调用)

 

 

 

组件卸载操作 ReactDom.unmountComponentAtNode()

react  新生命周期   三个will钩子前加 UNSAFE    (除了componentWillUnmount)

getDerivedStateFromProps(props,state){return props}    从props 派生到state

 

getSnapshotBeforeUpdate(){ return snapshotValue }

 

组件更新完毕的钩子

componentDidUpdate(prevprops,prevstate,snapshotValue){}

 

 

react-router-dom 路由 switch 使用

<Switch>  是唯一的因为它仅仅只会渲染一个路径。相比之下（不使用<Switch>包裹的情况下），每一个被location匹配到的<Route>将都会被渲染