React

3/11/2021 React

摘要

React的一些记录

# React

# 脚手架

# 1、创建项目并启动

1、全局安装:npm install -g create-react-app

2、切换到想创建项目的目录。 create-react-app helloreact

3、进入项目文件夹:cd helloreact

4、启动项目:npm start

5、(可选)npm add prop-types

# todolist知识点

1、拆分组件、实现静态组件,注意:className、style的写法

2、动态初始化列表,如何确定将数据放在哪个组件的state中

——某个组件使用,放在自身的state中

——某些组件使用,放在他们共同的父组件state中(官方称为状态提升)

3、关于父子之间通信:

  1. 父 => 子 通过props

  2. 子 => 父 通过props 前提父提前给子传递一个函数

    4、注意 defaultChecked与check的区别 (类似的还有defaultValue和Value)

defaultChecked只有在第一次指定,也就是初次渲染的时候的时候才起作用,更新的时候不受控制

5、状态在哪里,操作状态的方法就在哪里

# redux精简

1、去除组件自身需要共享的状态 (这里以Count组件作为例子)

2、src下建立:

​ -redxu

​ -store.js

​ -count_reducer.js

3、store.js

  1. 引入redux 中的createStore函数,创建一个store

  2. .createStore调用时要传入一个为其服务的reducer

  3. 记得暴露store对象

4、.count_reducer.js:

​ 1、reducer的本质是一个函数, 接收:preState, action ,返回加工后的状态

​ 2、reducer有两个作用:初始化状态,加工状态

​ 3、reducer被第一次调用时候,是store自动触发的,

​ 传递的preState是undefined,传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

5、在index.js中检测store中状态的改变,一旦发生改变重新渲染

注意!!! redux只负责管理状态,至于状态的改变驱动着页面的展示,要靠我们自己写

Last Updated: 9/23/2022, 2:44:12 PM
夜空中最亮的星
逃跑计划