React的基础和redux

react的环境搭建

  官网：https://reacejs.org/
  官方脚手架搭建：
   安装命令行工具：npm install create-react-app -g
   创建react项目：create-react-app 目录 | . .指的是在当前文件夹下使用参考：https://create-react-app.dev/docs/getting-started
   可选yarn eject 解构出所有的配置文件，去除eslint警告:找到项目下config/webpack.config.js,注释关于eslint的导入和rules

   使用yarn start运行项目,yarn build 打包项目
   react主入口的模块是index.js

react的特点

   react是由社区维护,vue是官方维护
   react是声明式,而像jQuery属于命令式
   组件化,提高复用性，模块化和组合性

JSX语法糖

   HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写
   注意事项：
    1.对象不能直接渲染,数组是以字符串的形式进行渲染的
    在jsx中 class改为className
    事件的首字母要大写
    需要有个根元素进行包裹

react的三大属性

state

     state顾名思义就是状态，它只是用来控制这个组件本身自己的状态，我们可以用state来完成对行为的控制、数据的更新、界面的渲染，由于组件不能修改传入的props，所以需要记录自身的数据变化。通过setState来修改state状态中的值
     如果this.setState({})连续执行多次 对象会进行合并,并且执行最后一个

	this.setState({
		key:新的值
	},callback)
this.setState((prevstate,props)=>{},callbakc)

refs

    React 支持给任意组件添加特殊属性ref ，ref可以是一个字符串，也可以是一个属性接受一个回调函数，它在组件被加载或卸载时会立即执行。
    1.this.refs.表示节点字符串
     ref = {(node)=>this.node=node} 使用的时候 this.node

props

     react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。props一定来源于自身的默认属性或者父组件传递下来的

 static propProps = {
2         val:PropTypes.string.isRequired
3 }
4 static defaultProps = {
5         val:0
6 }

props与state的区别

    props用于定义外部接口，state用于记录内部状态
    props的赋值在于外部世界使用组件，state的赋值在于组件内部
    组件不应该改变props的值，而state存在的目的就是让组件来修改的

redux

   状态管理工具 安装npm i redux --save

三大原则

    1.store是唯一的
    2.state是只读的
    3.通过纯函数reducer能够对状态进行修改 纯函数 只要是同样的输入,必定得到同样的输出
    纯函数
      1.不能改写参数
      2.不能调用系统I/O 的API
      3.不能调用Date.now()或者Math.random()等不纯的方法,因为每次会得到不一样的结果

store的常用方法

读取store的方法

    store.getState()

修改store的方法

     1.store.dispatch(“动作”)action中一定含有type这个键,并且type的值一定不能重复
    2.动作发给了reducer第二个参数action action一定要含有type,还可能接收一些其他参数
    3.根据type修改数据
     1.做好state的副本
     2.修改state的副本对象
     返回新的state

监听store的方法

    subscribe,监听store里的数据变化