– 关注前端和node js,分享福利和心得!

react回顾

指南

公司一直都是使用vue技术栈,这样导致之前的react技术栈比较生疏了,这里就来回顾下react的基础知识吧

  • 安装

    npm i -g create-react-app projectName
    cd projectName
    npm run start
  • 入口文件index.js

    import React from "react"
    import ReactDOM from 'react-dom'
    import App from "./App"
    ReactDOM.render(<App/>,document.getElementById('root'))
  • 编写组件

    import React,{Component} from "react"
    class Hoome extends Ccomponent {
      render(){
          return (<div>Home组件</div>)
      }
    }

    JXS语法

  • 数据绑定

    react中的数据绑定使用{},并且属性绑定时不需要加引号,这里很容易和vue混淆

    state={
    name:'张三',
    age:18,
    sex:true,
    aihao:['看书','学习','打游戏']
    }
    render(){
    return (
        <div>
            <p>姓名:{this.state.name}</p>
            <p>年龄:{this.state.age}</p>
            <p>性别:{this.state.sex?'男':'女'}</p>
            <dl>
                <dt>爱好</dt>
                {
                    this.state.aihao.map((item,index)=>{
                        return <dd>{index}--{item}</dd>
                    })
                }
    
            </dl>
        </div>
    )
    }
  • 属性绑定

    <input value={this.state.inputValue} />
    <img src={this.state.imgUrl} />
    <div className="list">绑定class</div>
    

<label htmlFor="name">姓名</label> <input id="name" value={this.state.value}/>

<div dangerousSetInnerHtml={{__html:this.state.content}}></div>

**需要注意的时,绑定class需要使用className,label中的for要使用htmlFor,绑定html使用dangerouslySetInnerHTML 避免和js中的class关键词冲突**

-   事件绑定

在render函数的同级,定义好方法 handleClick(){ console.log(this.state.name) } <button onClick={this.handleClick}>click事件</button>

如果直接这样做了,控制台就会报错,找不到state,这是因为this的指向不对

方法1,在调用方法的时候使用bind绑定this

<button onClick={this.handleClick.bind(this)}>click事</button>

方法2,在构造函数中绑定this,据说这种方式性能好,但是写起来臃肿

constructor(props){ super(props) this.state={ name:'张三' } this.handleClick=this.handleClick.bind(this) } <button onClick={this.handleClick}>click事件</button>

方法3,在定义方法的时候使用箭头函数

handleClick=()=>{ console.log(this.state.name) } <button onClick={this.handleClick}>click事件</button>

**需要注意的是,事件名使用的是小驼峰,原生事件是onClick,onmouseover,在react中是onClick,onMouseover这样的**

#### 父子组件通信
-   父组件向子组件传值,通过自定义props

父组件Father.js import Child from "./Child" state={ name:"我是父组件的name", list:[] } render(){ return ( <div>

        <Child name={this.state.name} />
    </div>
)

}

子组件Child.js

render(){ return ( <div> {this.props.name} </div> ) }

-   子组件向父组件传值,通过props调用父组件中的方法

父组件Father.js import Child from "./Child" state={ name:"我是父组件的name", list:[] } handleClick=()=>{ console.log('father click') } render(){ return ( <div>

        <Child name={this.state.name} clickItem={this.handleClick} />
    </div>
)

}

子组件Child.js

render(){ return ( <div onClick={this.props.clickItem}> {this.props.name} </div> ) }


-   props检验

大部分时候,我们需要指定props的类型,保证组件 传值时能够更加严谨

引入prop-types

import PropTypes from "prop-types"

在组件的最外面定义类型

Chhild.propTypes={ name:PropTypes.string.isRequired,//isRequired必填 age:PropTypes.number, clickItem:PropTypes.func }


-   props设置默认值(不需要引入prop-types)

Child.defaultProps={ name:'张三' }


#### 生命周期
-   componentWillMount
在组件即将挂载到页面时执行,只在页面刷新的时候执行一次
-   render
组件state或者props发生改变时都会执行
-   componentDidMount
组件挂载完成时被执行,如果需要操作dom,就在这个生命周期中处理,axios请求远程数据也建议在这里
-   shouldComponentUpdate
在组件更新前被执行,必须返回一个布尔类型的值,如果返回false,组件就不会更新了
-   componentWillUpdate
componentWillUpdate在组件更新之前执行,但是在shouldComponentUpdate之后执行,如果shouldComponentUpdate返回flase,这个函数不会执行
-   componeentDidUpdate
在组件更新之后执行,它是组件更新的最后一个环节
- componentWillReceiveProps
componentWillReceiveProps必须写到组件里面,子组件接受到父组件传递过来的props,富足纪检render函数重新执行,这个生命周期就会执行

-   **性能优化**

在默认情况下,每次父组件里面state发生改变时,子组件的render都会执行一次,这样会造成性能问题,这个时候可以通过在子组件的shouldComponentUpdate中处理

shouldComponentUpdate(nextProps,nextState){ //nextProps变化后的属性 //nextState变化后的状态 if(nextProps.num!==nextState.num){ return true }else{ return false } } ```

最新文章

    热门文章