好好学React系列一【20200129】

最新推荐文章于 2024-01-02 21:55:50 发布

原创最新推荐文章于 2024-01-02 21:55:50 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

react 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了使用React与原生HTML/CSS/JS构建前端页面的区别。React通过组件化和声明式编程解决了传统开发中DOM操作的复杂性和状态管理问题。React的特点包括组件化开发和自动UI更新。在示例中，展示了如何用原生方法和React实现文本及按钮交互，强调了React的jsx和setState方法的优势。

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/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/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>