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

今天跟着字节的课程学习了React的基础内容

一、本堂课重点内容：

1.React的历史与应用

它是一个将数据渲染为HTML视图 的js库，特点：

• 采用组件化模式，声明式编码，提高开发效率和组件复用性
• 在React Native中可以用react预发进行安卓、ios移动端开发
• 使用虚拟dom和有些的diffing算法，尽量减少与真实dom的交互，提高性能

2.React的设计思路

UI编程的痛点

状态更新，UI不会自动更新，需要手动地调用DOM进行更新 欠缺基本的代码层面的封装和隔离，代码层面没有组件化 UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到回调地域

响应式和转换式

转换式：给定【输入】求解【输出】 响应式：监听消息，消息驱动

事件 -> 执行既定的回调 -> 状态变更 -> UI更新

3.React（hooks）的写法

React Hooks :

2018年底FaceBook的React小组推出Hooks以来，所有的React的开发者都对它大为赞赏。React Hooks就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state，有Hooks可以不再使用类的形式定义组件了。这时候你的认知也要发生变化了，原来把组件分为有状态组件和无状态组件，有状态组件用类的形式声明，无状态组件用函数的形式声明。那现在所有的组件都可以用函数来声明了。

原始React写法:

 import React, { Component } from 'react';
  
 class Example extends Component {
     constructor(props) {
         super(props);
         this.state = { count:0 }
     }
     render() { 
         return (
             <div>
                 <p>You clicked {this.state.count} times</p>
                 <button onClick={this.addCount.bind(this)}>Chlick me</button>
             </div>
         );
     }
     addCount(){
         this.setState({count:this.state.count+1})
     }
 }
  
 export default Example;

React的Hooks 写法：

 import React, { useState } from 'react';
 function Example(){
     const [ count , setCount ] = useState(0);
     return (
         <div>
             <p>You clicked {count} times</p>
             <button onClick={()=>{setCount(count+1)}}>click me</button>
         </div>
     )
 }
 export default Example;

• Hooks本质上就是一类特殊的函数，他们可以为你的函数型组件（function component）注入一些特殊的功能。

4.React状态管理库

状态管理库

状态机

5.应用级框架科普