react基础

react依赖包下载  npmjs.com

1.react样式
    1.全局写法:
    引入:import  './app.scss'
    使用:<p className="box"}>全局样式</p>
     2.局部样式写法:
    引入:import styles from './app.module.scss'
    使用:<p className="styles.box">局部样式</p>
    文件命名:App.module.scss
    在局部中使用全局:   :global  
     3.直接使用样式
    <p style={{width:'100px',height:'100px'}}></p>
     4.类名操作:
    安装:cnpm  i classnames -d
    引入:import  cl from 'classnames'   //cl是一个函数
    使用:<p className={
        a:true,
        b:true,
        c:false
    }></p>
      5.样式组件
    引入 :import styled from 'styled-components'
    创建组件:const  a = styled.div` width:100px;height:100px `
    使用:<a/>
    使用逻辑:
        1.在创建时:background: ${props => props.color||'red'};   //这里写了一个小逻辑
        2.在类组件中  color = 'plink' 
        3.使用样式组件  <a/>
                    <a color={this.color}/>   //有color中是粉色,无color是红色

2.事件:

    点击事件:onClick
    键盘事件:onKeyDown
    输入框事件:onInput
    输入框改变事件:onChange
    事件语法:<button onClick={this.getval}></button>
    
     1.事件传参:<button onClick={ this.fn(10) }> 触发 </button>
        fn = ( n ) => {
                alert( n )
                  }
    
    
    2.bind绑定  解决普通函数中的this会丢失
        使用:方法1.调用时绑定bind    <button onClick={this.fn.bind(this)}>点击</button>
                  方法2.在constructor(){super() this.fn=this.fn.bind(this)}
                  3.fn(){}
    3.原生事件   通过componentDidMount(){ }拿到真实dom
        使用:componentDidMount(){ 
            const  btn = document.querySelector('button')//拿到页面的按钮
            btn.οnclick=function(){ alert('原生事件') }
        }
    
3.props
    1.props解构:
        使用:render(){ const  {name,age} = this.props }
        <p>{name}</p>
    2.props外部传参
        使用:<Hello name="haha" age={18}></Hello>
        Hello组件接收:
            //react使用语法时使用单括号
            <p>{this.props.name}</p>
            <p>{this.props.age}</p>
    3.props自身定义
        类组件通过一个关键字 static defaultProps={}  来定义自身属性
        static  defaultProps ={ color:'yellow' }
        <p>{this.props.color}</p>

    4.props验证【由外部传入的props】
        需要下载依赖包  prop-types
        1.导入 prop-types
        先将属性传参:<Hello name="hhh" age={18}></Hello>
        Hello组件验证:
            使用prop-types来进行验证     组件.propsTypes={}
            用法:
                Hello.propsTypes={
                    name:PropTypes.string  //验证类型
                    customProp(props ,propName,componentName ){ //props:属性,propName:属性名,componentName:组件名
                        if(props.money<3000){ alert('给少了') }
                    }

                }
    
4.state
    1.state定义:
        1.在构造函数中定义:  constructor(){ super() this.state={ name:'hahah' } }
        调用:先解构  const {name} = this.staste    return(<div>{name}</div>)
    
        2.在class中直接定义   state={name:'fox'}  {name}

    2.state值修改 在类组件中必须通过 setState来修改值
        用法:写法1: this.setstate({ name:'李四' })
                   写法2:this.setState((preState)={ console.log('preStete',preState)  return{ name:'李四' }  }) //preState时setState的旧值
    3.setState的异步操作:
        this.setstate({ name:'fox'},()=>{document.title = this.state.name})
    4.setState的原生事件(同步)
        1.获取dom  const btn= document.quersySelector('button')
        2.const  _this = this  //由于没有this所以声明一个常量来获取this
        3.在事件中使用
            btn,onclick = function(){ _this.setState({ name:"fox" }) }
5.{}
    react中支持{}来实行{}语法:
        return(<div>{ this.state.name.split('').reverse().join('') } </div>)
        或者: {alert(‘hello’)}

6.条件渲染
    1,短路原则:{ flag && <p>你好</p> }
    2. 三目运算 : { flag ? <p>你好</p> : '' }
7.列表渲染
      <ul>
          {
            list && list.map(item => <li key={item.cid}> { item.name } </li>)  //一定要有一个key值
          }
        </ul>

8.类组件ts约定
    interface P{  } //约定组件的 属性 的数据类型
    interface S{  } //约定组件的 状态 数据类型

9.组件通信
    p:any = {}可用于解决ts的声明问题   // p是属性名,这个用法可以在组件通信时使用
    1.父子组件通信:
        将数据绑定在子组件中  <Hello money={mone}><Hello/>
        子组件接收  <p>{this.props.mone}</p>
    2.子父组件通信:
        1.通过自定义属性的形式传递一个方法给子组件 
        <Hello setXjk={ this.setXjk } /> 
        setXjk = ( val)=>{ xjk:this.state.xjk.val }  //这个val由子组件传递过来
        2. 子组件调用父组件传递过来的方法  给父组件传值
            先给子组件创建一个方法,使用方法后给父组件传值
            <button onClick={ this.give }> 给红包 </button>
            give=()=>{ this.props.setXjk( this.state.hongbao ) }  //这个就是传递给父组件的val
    3.兄弟组件通信:
        在父组件中
            1.将kick传递给子组件:<Sister kick={this.kick} />  
            kick = () => {
                    //todo 通过ref绑定获取brother组件中的setCryFlag
                    this.brother.setCryFlag();
                  };
            子组件接收kick   <button onClick={ this.props.kick }> 揍弟弟 </button>
            2.使用ref将数据传递给另外一个子组件
             <Brother ref={(el) => (this.brother = el)} />
            在子组件中使用constructor生命周期,写一个setCryFlag方法  用于改变cryFlag的值
            { cryFlag && (<img/>) }
    4.跨组件通信:
        1.新建一个constext文件夹用于创建上下文对象
        配置如下:
            import React, { createContext } from 'react'
            const ctx: React.Context<number> = createContext(0)

            export default ctx 
        2.在父组件中将两个子组件嵌套
             <ctx.Provider value={ money }>  //在子组件前面要加ctx(constext文件中的名字)ctx.Provider名字固定 传递一个money值
                  <Father/>
                  </ctx.Provider>
        3.子组件通过 contextType来接收ctx这个上下文对象
            static contextType = ctx
        在使用this.context直接使用即可
            {this.context}
10.生命周期

挂载阶段
    1.constructor(props:p){   //挂载阶段自动执行
        super(props);
        作用1:定义state
        this,state={ name:'haha' }
        作用2:普通的this绑定
        this.handler = this.handler.bind(this)
        作用3:用于接收绑定在组件身上的属性
        console.log('props',props)
    }
    2. componentDidMount () {    //todo 表示组件挂载结束  
           
            //todo 作用1: 将虚拟DOM渲染成真实DOM,也就是我们可以得到真实DOM了,可以做真实DOM操作了
            this.p.style.background = 'red'
            //todo 作用2: 发送数据请求
            fetch('http://59.110.226.77:3000/api/category')
              .then(data => data.json())
              .then(res => {
                console.log('res',res)
              })
              .catch(error => Promise.reject(error))
      }
    3. getDerivedStateFromProps 表示从属性中获取派生的状态 【 将props转成state 】
          使用:static getDerivedStateFromProps(props: P, state: S) {
                console.log('getDerivedStateFromProps')
                return {    //todo 作用  return返回值可以将props处理成state
                      money: props.money 
                         }
              }
    4. render
        //todo 作用1: 解析this.state和this.props  
            //todo 作用2: 还可以将jsx的虚拟dom渲染成对象形式的虚拟DOM
            //! 注意点: 不能直接使用setState
更新阶段:

    5.getDerivedStateFromProps
        使用:static getDerivedStateFromProps(props: AppProps, state: AppState) {
               //todo 挂载阶段和更新阶段都会执行
                //todo 作用同挂载阶段
                console.log("getDerivedStateFromProps");
                return {};
                    }
    6. shouldComponentUpdate
        使用:shouldComponentUpdate(nextProps: AppProps, nextState: AppState) {
                console.log("shouldComponentUpdate");
                //!!! 很关键: 做react组件渲染优化的 [ 判断条件要自己手动来写 ]
                /* 
                      nextProps  最新的属性
                      nextState  最新的状态
                      this.props  旧属性
                      this.state  旧状态
                */
                //todo 这个钩子函数必须要有返回值,返回值是一个布尔值
                // return true //todo 表示允许组件重新渲染
                // return false //todo 表示不允许组件重新渲染
                return this.state.name != nextState.name; // 旧state和新状态对比,如果不同,则重新渲染组件,否则不允许渲染组件
                  }
    7.getSnapshotBeforeUpdate
        使用:getSnapshotBeforeUpdate = (prevProps: AppProps, prevState: AppState) => {
                /* 
                      prevProps     prev-- previous  先前的     旧属性
                     prevState     旧状态
                */
                console.log("getSnapshotBeforeUpdate");
                //todo 作用1  可以得到旧的 porps & state
                //todo 作用2  通过返回值可以传递一个数据给componentDidUpdate
                //!!! 必须有返回值
               return 1000;
          };
    8.componentDidUpdate
        使用:componentDidUpdate(
                prevProps: AppProps,
                prevState: AppState,
                snapShot: number
                     ) {
                //!!! 表示组件更新阶段了
                //todo 作用1: 再次得到了新的真实DOM
                    this.p.style.background = "blue";
                //todo 作用2: 可以发送数据请求
                    fetch("http://59.110.226.77:3000/api/category")
                      .then((data) => data.json())
                      .then((res) => {
                        console.log("res", res);
                      })
                      .catch((error) => Promise.reject(error));
                //todo 作用3: 通过snapShot得到getSnapshotBeforeUpdate传递过来的数据
                    console.log('snapshot',snapShot)
    
              }
    9.render  同挂载阶段

销毁阶段:
    componentWillUnmount(){  //表示组件被销毁了
        作用1: 消除定时器
         clearInterval(this.timer);
        作用2:清除绑定在window或者document身上的事件
        window.onresize = null;
        作用三:清除第三方实例
        delete this.swiper
        
        }

11.静态路由:
                    
            

    

上一篇:Pycharm TODO(待办)功能


下一篇:Vue学习