React基础

如何去掉最外层的div不包裹 Fragment 碎片化

import React,{Component,Fragment } from 'react'
 return  (
            <Fragment>
               <p></p>
            </Fragment>
        )

事件的绑定

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

修改state的值

inputChange(e){
    this.setState({
        inputValue:e.target.value
    })
}

react的循环

Key值的绑定不要只是一个index 尽量的是唯一值

<ul>
    {
        this.state.list.map((item,index)=>{
            return <li key={index+item}>{item}</li>
        })
    }
</ul>  

修改this的指向

<button onClick={this.addList.bind(this)}> 增加服务 </button>

增加值

addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue]
    })
}

删除数组值
页面return 需要（）包起来

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                >
                    {item}
                </li>
            )
        })
    }
</ul>  

必须先声明 不允许直接操作 this.state

//删除单项服务
deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
    
}

JSX的代码注释

 {/* 正确注释的写法 */}
  {
        //正确注释的写法 
  }

如何解析html标签

用这种容易被XSS攻击

dangerouslySetInnerHTML={{__html:item}}

laber中使用for

<label htmlFor="aa">加入服务：</label>
    <input id="aa" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

VScode插件

Simple React Snippets

父组件传值给子组件——props

父组件：

<XiaojiejieItem content={item} />

子组件：

 return ( 
            <div>{this.props.content}</div>
         );

子组件向父组件传递数据

子组件：

 <div onClick={this.handleClick}>{this.props.content}</div>
  handleClick(){
        this.props.deleteItem(this.props.index)
    }

父组件：

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}
                //关键代码-------------------start
                deleteItem={this.deleteItem.bind(this)}
                //关键代码-------------------end
                />
            )
        })
    }
</ul>  

绑定this——constructor（bind）推荐

   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
   }

单项数据流

不允许数据传递后直接修改
解决方案 传递给一个方法 使其可以修改

React谷歌调试工具

React developer tools

React效验传递的值

import PropTypes from 'prop-types'

独立在class外的

XiaojiejieItem.propTypes={
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number
}

必须传递的值——isRequired

name:PropTypes.string.isRequired

默认值的传递——defaultProps

XiaojiejieItem.defaultProps = {
    name:'aa'
}

ref

ref={(input)=>{this.input=input}}

inputChange(){
    this.setState({
        inputValue:this.input.value
    })
}

由于setState是异步的 执行需要时间 打印在cb中

addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:''       
    },()=>{
        console.log(this.ul.querySelectorAll('div').length)
    })
}

React的生命周期

Initialization:初始化阶段。
Mounting: 挂在阶段。
Updation: 更新阶段。
Unmounting: 销毁阶段

Mounting阶段叫挂载阶段，伴随着整个虚拟DOM的生成，它里边有三个小的生命周期函数，分别是：

componentWillMount : 在组件即将被挂载到页面的时刻执行。

componentWillMount(){
    console.log('componentWillMount----组件将要挂载到页面的时刻')
}

render : 页面state或props发生变化时执行。

render(){
    console.log('render---组件挂载中.......')
}

componentDidMount : 组件挂载完成时被执行。

componentDidMount(){
    console.log('componentDidMount----组件挂载完成的时刻执行')
}

优化：
在didMount里面请求数据

componentDidMount(){
    axios.post
}

shouldComponentUpdate——函数会在组件更新之前，自动被执行

常常被用来优化组件的性能

shouldComponentUpdate(){
    console.log('shouldComponentUpdate---组件发生改变前执行')
}

优化：

shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content !== this.props.content){
        return true
    }else{
        return false
    }
   
}

componentWillUpdate——在组件更新之前

componentWillUpdate(){
    console.log('componentWillUpdate---组件更新前')
}

componentDidUpdate——组件更新之后执行

componentDidUpdate(){
    console.log('componentDidUpdate----组件更新之后执行')
}

componentWillUnmount——组件从页面中删除的时候执行

componentWillUnmount(){
    console.log('child - componentWillUnmount')
}

react-transition-group——动画库

安装：

npm install react-transition-group --save

引入：

CSSTransition

import { CSSTransition } from 'react-transition-group'

调用

  <CSSTransition 
                in={this.state.isShow}   //用于判断是否出现的状态
                timeout={2000}           //动画持续时间
                classNames="boss-text"   //className值，防止重复
            >
              </CSSTransition>

classNames-enter: 进入（入场）前的CSS样式；
classNames-enter-active:进入动画直到完成时之前的CSS样式;
classNames-enter-done:进入完成时的CSS样式;
classNames-exit:退出（出场）前的CSS样式;
classNames-exit-active:退出动画知道完成时之前的的CSS样式。
classNames-exit-done:退出完成时的CSS样式。

.boss-text-enter{
    opacity: 0;
}
.boss-text-enter-active{
    opacity: 1;
    transition: opacity 2000ms;

}
.boss-text-enter-done{
    opacity: 1;
}
.boss-text-exit{
    opacity: 1;
}
.boss-text-exit-active{
    opacity: 0;
    transition: opacity 2000ms;

}
.boss-text-exit-done{
    opacity: 0;
}

unmountOnExit属性
元素退场时，自动把DOM也删除

多DOM的动画

引入：

import {CSSTransition , TransitionGroup} from 'react-transition-group'

调用

  <TransitionGroup>
    {
        this.state.list.map((item,index)=>{
            return (
                <CSSTransition
                    timeout={1000}
                    classNames='boss-text'
                    unmountOnExit
                    appear={true}
                    key={index+item}  
                >
                    <XiaojiejieItem 
                    content={item}
                    index={index}
                    deleteItem={this.deleteItem.bind(this)}
                    />
                </CSSTransition>
            )
        })
    }
    </TransitionGroup>

在用CSSTransition包裹最外层

<CSSTransition
                    timeout={1000}
                    classNames='boss-text'
                    unmountOnExit
                    appear={true}
                    key={index+item}  
                >
                    <XiaojiejieItem 
                    content={item}
                    index={index}
                    deleteItem={this.deleteItem.bind(this)}
                    />
                </CSSTransition>