# 响应式系统与React|青训营笔记

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

一、课程知识要点：

1. React历史与应用
2. React的设计思路
3. React的设计与实现
4. React(hooks)的写法

二、详细知识点介绍：

React历史与应用

• 2010年Facebook在其php生态中.引入了xhp框架.首次引入了组合式组件的思想.启发了后来的React的设计。

• 2011年Jordan Walke创造了FaxJS ,也就是后来的 React原型:
  

• 2012年在Facebook收购Instagram后.该FaxsS项目在内部得到使用.Jordan Walke 基于FaxJS的经验.创造了React。

• 2013年React正式开源.在2013 JsConf 上Jordan walke介绍了这款全新的框架。

• 2014年-今天生态大爆发.各种围绕React的新工具/新框架开始涌现:

React的设计思路

UI编程痛点

1. 状态更新,ul不会自动更新﹐需要手动地调用DOM进行更新。
2. 欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
3. Ul之间的数据依赖关系﹐需要手动维护.如果依赖链路长,则会遇到“ Callback Hell”。

组件化

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

React的设计与实现—响应式编程

1. 状态更新,uI自动更新。“状态更新,uI不会自动更新,需要手动地调用DoM进行更新。”
2. 前端代码组件化,可复用,可封装。“欠缺基本的代码层面的封装和隔离﹐代码层面没有组件化。”
3. 状态之间的互相依赖关系,只需声明即可。“u之间的数据依赖关系﹐需要手动维护,如果依赖链路长,则会遇到" callback Hell”。"

总结（组件化）：

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

React(hooks)的写法

import React, { useState } from 'react' ;
function Example( ) {
    // Declare a new state variable, which we'll call "count"
    const [count,setCount] = useState(0);
    
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={()=>setCount( count + 1)}>
          click me
        </ button>
      </div>
  );

}

import React, { useState, useEffect } from 'react ';
function Example() {
  const [count,setCount] = useState(0) ;
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times `;});
   return (
     <div>
       <p>You clicked {count} times</ p>
       <button onclick={()=>setCount(count + 1)}>
       click me
       </button>
     </div>
);
}

三、课后总结

详细讲述了四个方面的响应式系统与React，值得我们认真去学习。