React ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第6天。本文主要讲的React的相关知识，介绍了

这是我参与「第五届青训营」伴学笔记创作活动的第6天

React的设计思路

UI编程的痛点

组件化

总结

1.组件是组件的组合/原子组件 2.组件内拥有状态，外部不可见 3.父组件可将状态传入组件内部

思考与解答

思考∶ 1.React是单向数据流，还是双向数据流? 2.如何解决状态不合理上升的问题? 3.组件的状态改变后，如何更新 DOM ?

解答： 1.React是单向数据流 2.使用React状态管理库 3.虚拟DOM策略，把改变的DOM子树给更新

组件的设计

1.组件声明了状态和U的映射。 2.组件有Props/State两种状态。 3.“组件”可由其他组件拼装而成。

组件的生命周期

dom的创建在mounting时刻。

Hooks写法

Hook使用法则不要在循环，条件或嵌套函数中调用Hook。

import React, { useState,useEffect } from ' react';
function Example() {
    const [count,setCount] = useState(0);
    // 一般用来操作组件外的东西。
    useEffect(()=> {
        document.title = `You clicked ${count} times `;
    });
    return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick=i)=>setCount(count + 1)}>click me</button>
    </div>
  );
}

Virtual DOM(虚拟DOM)

Virtual DOM是一种用于和真实DOM同步，而在S内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一—对应的关系。

不同类型的元素替换

同类型的DOM元素更新

同类型的组件元素递归

状态管理库

核心思想：

全局状态库

import { model } from '@modern-js/runtime/model';
const countModel = model( 'count ' ).define({
  state:{
    x: 0,
    y: 0
  }，
  actions: {
    incrementx(state) {state.x += 1;},
    incrementY(state) {state.y += 1;},
  }，
});
export default countModel;

组件中使用

const [{ x,y }, { incrementX,incrementY } ] = useModel(countModel)
下文正常使用。

总结

React脚手架意义

脚手架是开发现代Web应用的必备
充分利用 Webpack，Babel，ESLint等工具辅助项目开发
零配置，无需手动配置繁琐的工具即可使用
关注业务，而不是工具配置

事件对象

可以通过事件处理函数的参数获取到事件对象
React中的事件对象叫做：合成事件
合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取

有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件
状态(state) 即数据
函数组件没有自己的状态，只负责数据展示
类组件有自己的状态，负责更新UI，让页面动起来

State和SetState

state基本使用

状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据
通过this.state来获取状态

setState() 修改状态

状态是可变的
语法：this.setState({要修改的数据})
注意：不要直接修改state中的值，这是错误的
setState() 作用：1.修改 state 2.更新UI
思想：数据驱动视图

React ｜ 青训营笔记