react基础

2021-06-07 23:29:55 阅读：201 来源： 互联网

标签：name 使用基础 react state props 组件 todo

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.静态路由：

标签：name,使用,基础,react,state,props,组件,todo
来源： https://blog.csdn.net/weixin_45936642/article/details/117676745

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react基础