habc0807/react-todolist

react 项目问题记录 1.React, {Component} from ‘react’ 中 React 组件开头必须使用大写 2. 要求render返回的内容必须放到一个标签里 3.如果我包了一层 div 但是又不想让它在dom结构里展现该怎么办 react 16 提供了一个 fragment 相当于一个占位符不在element中体现

react 中的响应式设计**和事件绑定

this.state里的初始值，展示后，通过事件绑定事件监听修改state, 使用setState 来处理

5.immutable state不允许我们做任何的改变

6.标签样式的class 不建议使用class因为是jsx语法与class同名建议使用 className来代替class

7.lable的作用是扩大点击区域上的for 属性要换为htmlFor

8.拆分组件 setState写成了一个异步的返回函数函数返回对象

this.setState(() => ({ inputValue: e.target.value })) setState 的同步异步原理虚拟DOM

setState接受不了第两个参数，也是一个函数参数希望等DOM更新后在处理相关操作就可以使用 setState的第二个参数

this.setState(prevState => {
    return {
        list: [...prevState.list, prevState.inputValue],
        inputValue: ""
    }
}, () => {
    console.log(this.ul.querySelectorAll('li').length)
});

9 prevState 如此写法,在react中,会形成一个队列,对所有setState依次调用 this.setState(prevState => ({ list: [...prevState.list, prevState.inputValue], inputValue: "" }));

10.react 是一种声明式开发声明式开发减少dom操作
让数据来编程，更新数据，更新图纸，帮你构建这个建筑

可以与其他框架并存针对不同的根dom

React组件式开发组件名首字母要大写

单向水流

父组件可以向子组件传数据，子组件可以展示，不能更改，着就是react的单向数据流

视图层框架只用react 不行我们需要一个数组层的框架 flux mobx redux 不是一个大型的完整框架

函数式编程维护比较容易函数单一自动化测试非常容易进行测试

给自动化测试带来了很大的便捷性

安装 chrrome 插件 react developer 写了一篇文章加油哦

12 propTypes 子组件校验接受的变量和函数的类型和设置是否必须传项
defaultProps 定义变量的默认值

需要注意的是 propTypes defaultProps 首字母需要小写

13 当组件的state 或者 props 发生改变的时候组件的render函数就会重新去执行当父组件的render函数被运行时，它的子组件的render都将被重新运行

14 理解虚拟DOM

15 e.target可以获取点击元素的DOM节点 <input type="text" class="input" placeholder="你要干点啥" value="">

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

16 为什么在 constructor 里面bind函数，而不使用箭头函数这是因为箭头函数会导致每次函数指针变化，从而降低程序性能？

16 生命周期函数

生命周期函数是在某一个特殊的时刻组件自动执行的函数

constructor不是react独有的是ES6的一个函数就不归于react生命周期。在react组件中会初始化它自己的数据 constructor 函数可以接收props函数通过state定义组件内部函数。

17 为什么shouldComponentUpdate需要返回一个boolean值？你的组件需要被更新吗如果返回false, 我不需要更新我的组件（处理逻辑复杂的情况什么情况下要更新组件什么情况下不需要更新组件有它自己的使用场景一般返回true）

18 为什么请求不能放到 render里 render函数每当数据更新都会执行这样会多次请求数据了不合理我们想哪个生命周期执行被执行一次 componentDidMount, 为什么不使用 componentWillMount呢，是因为做服务端渲染或者app是用componentWillMount会有问题。为了防止这些问题，尽量使用componentDidMount，永远都不会有问题。

19 如何ajax请求

mounting 挂载

componentWillMount() // 在组件即将被挂载到页面的时刻自动执行
render() 
componentDidMount() // 在组件被挂载到页面之后自动执行

componentWillMount 和 componentDidMount 只在第一次挂载的时候执行，render函数每次数据更新都会执行。

Updation

props / state

componentWillReceiveProps shouldComponentUpdate // 组件被更新之前自动执行 > 需要返回一个boolean componentWillUpdate // 组件被更新之前它自动执行但是它在shouldComponentUpdate返回true之后执行 render componentDidUpdate // 组件更新完成之后自动执行

componentWillReceiveProps

// 1. 当一个组件从父组件接受了参数 // 2. 只要父组件得render函数重新执行了子组件的这个生命周期就会执行该生命周期更新完成之后它会被执行 // 3. 如果这个组件第一次存在于父组件中，不会执行如果这个组件之前已经存在于父组件中，才会执行

Unmounting

componentWillUnmount // 当这个组件即将被从页面中剔除会自动执行

shouldComponentUpdate 的使用场景

组件其它生命周期都可以不写，是因为组件是继承的React.Component, 而React.Component内置了除render函数的外的其它所有生命周期。

所以自定义组件需要写的生命周期是render。

css3动画

transtion: all 1s ease-in forwards
animation ： animation-name 2s ease-in forwards

Keyframes animation-name { 0% {} 50% {} 100% {} }

react-transition-group 实现动画

<CSSTransition in={this.state.show} timeout={1000} classNames='fade' unmountOnExit onEntered={(el) => {el.style.color = 'blue'}} appear={true}

<div>hello</div>

1.Redux = Reducer + Flux （官方推出最原始的数据层框架） Flux的了解 todo 视频

Redux的工作流程：

store: 图书管理员 reducer: 管理员的小本本（记录借阅情况） component: 接受store查阅reducer后的数据 action: component 用户操作跟管理说的话剩下的事让图书管理员去处理

store 1.安装并引用redux 2.creactStore创建store, 并且接收一个函数参数

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)
export default store

reducer 返回一个函数，该函数接收两个参数 state\action, state可赋值一个默认参数defaultState

const defaultState = {
    list: [
        '1',
        '2',
        '3',
    ],
    inputValue: ''
}

export default (state = defaultState, action) => {
    return state
}

怎样让store一改变我的组件就改变呢

this.setState(store.getState()) // 如果新的state不依赖于老得state的数据 用对象可以
this.setState(store.getState) // 如果新的state依赖于老得state的数据 就传函数

为什么呢？里面涉及到哪些底层原理？

actionCreator 统一处理action actionType 统一管理action type

当一个组件只有render函数的时候就可以写成无状态组件

无状态组件的优势是什么？性能比较高是因为它就是一个函数 UI组件class是一个类类生成对象 react组件还会有生命周期函数，

redux-thunk的是redux的中间件，不是react的中间件

redux-saga 单独把异步的处理拆分到一个页面里

Provider 是react-redux提供的第一个核心API, Provider 提供器将store提供给了它内部组件

actionCreator.js 将用户行为的处理都放在该文件里处理返回用户行为的action对象

1.安装了chrome的redux-devtools插件，如果想让项目可以看到redux相关信息，需要在项目中store/index.js中配置

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store

window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION()

habc0807 / react-todolist

mounting 挂载

Updation

componentWillReceiveProps

Unmounting

shouldComponentUpdate 的使用场景

About

Languages