# react-recome

**Repository Path**: gekilyar/react-recome

## Basic Information

- **Project Name**: react-recome
- **Description**: just for learn the react
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-12-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 提交主干

- React组件的两种方式 类组件 函数式组件
- jsx 原理
    - dom树

- 动态添加不同的className 就用第三方插件 classnames 使用方法 具体查询npm
- styled-components 组件样式跟样式的其他几种定义方式
 
- 目录结构 构建方式
    - props.children 代表组件之间定义的东西都可以传 <App>这是我要传递的内容</App>
- prop-types 类型检查 为了组件的健壮性 props传来数组 我是只想要个对象 就可以对传递的值做个预定义 如果不是就会检查类型

    - 函数组件 检测方法 + 默认值
        -   ```js
            TodoHeader.propTypes = {
                title: PropTypes.string,
                desc: PropTypes.string,
                x:PropTypes.number.isRequired,
                y:PropTypes.number.isRequired
            }
            TodoHeader.defaultProps = {
                title: '今日待办项',
                desc: '今日事 今日毕',
                x:1,
                y:2
            }
            ```
    
    - 类组件  检测方法 + 默认值
        -   ```js
            static propTypes = {
                title: PropTypes.string,
                desc: PropTypes.string,
                x:PropTypes.number.isRequired,
                y:PropTypes.number.isRequired
            }
            static defaultProps = {
                title: '今日待办项',
                desc: '今日事 今日毕',
                x:1,
                y:2
            }
            ```
- state 组件内部的状态  **只有类组件有state**
    - 终于明白了有状态组件跟无状态组件的具体使用场景
    - 受控组件与非受控 组件
        - 外部控制组件数据 受控 数据源统一不会更改
        - 组件内部全是自身状态
        - 半受控 一半一半
    - 一层一层传递 `注意解构赋值`

    - setState 第一个参数有两种 一个是对象 一个是函数返回一个对象  是个异步操作
        -   ```js
                this.setState({
                    isLiked: !this.state.isLiked
                })

                // 如果子组件很多 保险的方式使用上一次的state
                this.setState((preveState,props)=>{
                    console.log(preveState,props)
                    return {
                        isLiked: !preveState.isLiked
                    } 
                },()=>{
                    console.log(this.state.isLiked)
                })
            ```


- 事件
    给事件传参的几种方式

        - bind(this)  this指向问题 具体细看
           不推荐 <button onClick={()=>{this.handleAddClick(要传递的参数)}}>
            推荐  <button onClick={()=>{this.handleAddClick.bind(this,要传递的参数)}}>
        - 把父组件的方法 用props传递下去

- ref 获取组件或者 `无状态组件不支持 ref`
    - createRef方法 获取dom元素   一般在constructer里面调用 因为构造函数只执行一次

    - lodash.js 实现一些重要的操作方法 自己也试试能不能写出来 看看源码 总结一下
        - noop 就是一个空函数 解决什么都不做就是执行空函数 ()=>{}

    - 注意代码规范 
    - 完成todolist

- 生命周期
    - 都是一些回调函数 所以 函数式组件没有
    - componentDidMount 里面发送请求
    - https://jsonplaceholder.typicode.com 获取mock数据