最近一两周在学习react，记录了一些笔记下来。

React

在src下，使用JS充当模块，使用JSX写HTML，导出模块后，在indexjs中导入。

添加注释：JSX中，{/* 大括号使用js注释 */}。

标签属性

HTML解析：为需要的标签添加 dangerouslySetInnerHTML={{ __html: item }} 属性。

label标签：label属性 for，应使用htmlFor。

注意：引用模板时，类名必须大写。

事件监听

在属性中使用驼峰命名的事件监听，例如 onChange={this.inputChange}，这个函数会自带一个事件参数e。

ref：获取某个元素ref={(input) => { this.input = input }}，获取一组元素

 ref={(ul) => { this.ul = ul }} //html
 this.ul.querySelectorAll('li') //获取到ul下所有li

数据

React没有像Vue那样的双向数据绑定，修改视图层内容时，需要在构造函数中使用super后声明数据。

需要添加onChange监听函数
使用e传入需要的参数
使用箭头函数获取当前对象的this引用
使用setState({key:value}) 改变数据值，此函数是异步的。

setState：此方法表现为异步 （它改变的是虚拟DOM），可以在第二个参数设置回调操作。

调用函数

在监听函数内部使用箭头函数，可以让this指向构造函数中的对象。

onClick={() => this.deleteItem()}

传递参数

onClick={(e) => this.deleteItem(e, index)}
deleteItem(e, index) {
    console.log(e);//事件对象
    console.log(index);//索引
    console.log(this);//构造函数
}

修改引用类型

// 推荐：使用临时变量修改
let tempList = this.state.list;
tempList.splice(index, 1);
this.setState({
    list: tempList,
})
// 不推荐：性能消耗高
this.state.list.splice(index, 1);
this.setState({
    list: this.state.list,
})

组件传值

父组件向子组件传值，

值：使用属性:content后跟值，在子组件中使用this.props.content使用。
函数：参数名写函数名，()=>this.function()。

//父组件
<BeautyItem content={item} index={index} key={item + index} 
deleteItem={() => this.deleteItem(index)} />
//子组件
<li onClick={() => this.handleClick()}>{this.props.content}</li>

handleClick() {
    this.props.deleteItem(this.props.index);
}

单向数据流：传递父组件中的state数据给子组件，子组件只读，不可修改。想修改必须使用父组件传过来的参数。
数据类型校验：使用 propTypes 插件，设置数据类型。
默认值：同上使用 propTypes 插件，设置默认值。

生命周期

16.0版本之前，常见

在这里插入图片描述

初始化→挂载→更新→移除。

其中更新分为传参→状态更新和状态更新两部分。

shouldComponentUpdate：使用它对变化的数据进行判断来决定是否渲染，常用于性能优化。

动画

React官方提供了一套动画库：react-transition-group

import { CSSTransition, TransitionGroup } from 'react-transition-group'
<TransitionGroup>
    <ul ref={(ul) => { this.ul = ul }}>
    {
        this.state.list.map((item, index) => {
            return (
                <CSSTransition
                    in={true}
                    timeout={1200}
                    classNames="animate"
                    unmountOnExit
                    // appear={true}
                    key={item}
    			>
        		<BeautyItem content={item} index={index} key={item + index} beautyName={'苍井空'}
    				deleteItem={() => this.deleteItem(index)}
    			/>
    			</CSSTransition>
    		)
    	})
    }
    </ul>
</TransitionGroup>

Redux

redux类似于vuex，是一个状态管理框架。AntDesign官方文档

用法参考上图。

技巧

将action中的type（方法操作名）单独写成一个type.js文件，然后在其他文件中导入使用。
将创造action的函数集中到一个文件中，保留对外接口。
只能有一个store,只有store能改变自身的内容，reducer中必须写纯函数。
使用UI组件与业务逻辑分离的方式，使用无状态组件。

Redux-thunk

redux中间件，引入时，利用react官方提供的增强功能，与react devtools一同引入。

Redux-saga

类似于 redux-thunk 一样的中间件，比 redux-thunk 略复杂。

React-redux：中间件，状态管理插件。

React学习笔记