好好学React系列一【20200129】

程序员文章站 2022-07-14 23:09:53

...

好好学React系列一

1、React :
2、需求

1、React :

用于构建用户界面的一个javascript库

1.1 构建前端页面的三个技术：

html：构建页面的结构
css：构建页面的样式
javascript：页面动态内容和交互

1.2使用原生的html css javascript 构建页面会存在一些问题

1、操作DOM兼容性的问题
2、多兼容性代码的冗余问题
3、代码组织和规范问题

2013年 facebook 开源javascript框架

在传统的开发模式中，我们过多的去操作界面的细节
并且需要掌握和使用大量DOM的API，当然我们可以通过jQuery来简化和适配一些API的使用
另外关于数据(状态)，往往会分散到各个地方，不方便管理和维护

1.3解决

1、以组件的方式去划分一个个功能模块
2、组件内以jsx来描述UI的样子，以state来存储组件内的状态
3、当应用的状态发生变化时，通过setState来修改状态，状态发生变化时 UI会自动发生更新

1.4react的特点

声明式编程：

vue react flutter
它允许我们只需要维护自己的状态，当状态改变时，react可以根据最新的状态去渲染我们的UI界面

UI = F( state )

UI 页面渲染
F 写的方法 render函数
state 状态

一个状态通过一个函数方法调用—UI
只需要改变状态就可以去更新界面

组件化开发

复杂界面拆分组件
合理进行组件的划分和设计

2、需求

在界面显示一个文本：hello world
点击下方的一个按钮，点击后文本改变为hello react

2.1 原生方式和react方式进行对比学习

2.1.1 原生方法：

<body>
  <h2 class="title"></h2>
  <button class="btn">改变文本</button>
  <script>
    //命令式编程，给浏览器一步步命令
    let message = "hello world"
    const titleEl = document.getElementsByClassName("title")[0];
    titleEl.innerHTML = message
    const btnEl = document.getElementsByClassName("btn")[0];
    btnEl.addEventListener("click",e => {
      message = "hello react";
      titleEl.innerHTML = message;
    })
  </script>
</body>

2.1.2 react方式

<body>
  <div id="app"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <script type="text/babel">
  //封装App组件
  class App extends React.Component{
    constructor() {
      super();
      this.state = {
       message = "hello world"
      }
    }
    render() {
      return (
        <div>
          <h2>{this.state.message}</h2>
          <button onClick={this.btnClick.bind(this)}>改变变量</button>  
        </div>  
      )
    }
    btnClick() {
      this.setState({
        message:"hello react"
      })
    }
  }
  ReactDOM.render(
    <App/>,
    document.getElementById("app")
  )
  </script>
</body>

理解一下react开发依赖

三个库：
react：包含react所必须的核心代码
react-dom： react渲染在不同平台所需要的核心代码
babel：将jsx转换成react代码的工具

react在之前是没有react-dom这个概念，所以的功能都在react里面
之后因为react-native
react包中包含react和react-native所共同拥有的核心代码

react-dom针对web和native所完成的事情不同：
web端：react-dom会将jsx最终渲染成真实dom，显示在浏览器中
native：react-dom会将jsx最终渲染成原生的控件

babel 编辑器编译器

当下很多浏览器并不支持es6的语法
编写源码时可以使用es6编写，之后通过babel工具，将es6转成大多数浏览器都支持的es5语法

babel 与 react的关系

默认情况下开发react其实可以不使用babel
但是前提是我们自己使用React.createElement来编写源代码，它编写的代码非常繁琐和可读性差
直接编写jsx，并且让babel帮助我们转换成React.createElement

好好学React系列一【20200129】