React初认识及组件

最新推荐文章于 2023-06-30 12:00:14 发布

qiannuo_

最新推荐文章于 2023-06-30 12:00:14 发布

阅读量187

点赞数 1

本文链接：https://blog.csdn.net/qiannuo_/article/details/85925800

版权

现代的应用程序趋向于采用一种称为单页应用（SPA）的模式。不同于传统模式：导航到不同的页面，甚至不需要重新加载一个页面。应用的不同视图被加载到同一页面上。

单页应用：内容是动态显示的，不需要刷新或导航到不同的页面。

React 是一个用于构建用户界面的 JAVASCRIPT 库。

１、自动化UI状态管理

　　React主要用于构建UI，在React中，只需要关注：UI所处的最终状态。React负责管理一切，搞清楚要发生什么，才能确保UI被正确表示。所有状态管理的事情不需要我们操心。

２、快速的DOM操作

修改内存中的虚拟DOM。

3用来创建真正可组合UI的API

编程领域中，模块化，简洁，自包含是好的理念．React把这些理念带到用户界面中．很多React的核心API围绕着更容易创建更小的界面组件，这些界面组件随后可以与其它界面组件组合，创建更大更复杂的界面组件.

4　完全在JavaScript中定义UI

React允许用类似HTML的语法，即JSX，来定义UI,而JSX是JavaScript完全支持的.

总结:

React并非一个很完整的框架,主要作用于视图层, 很多人认为 React 是 MVC 中的 V（视图）。

React核心思想之一是：让应用程序的界面部分可以自包含和重用。这就是为什么组成界面的HTML元素和JavaScript装到同一个称为组件的桶中的原因。

Web应用(以及浏览器显示的其它一切)是由HTML CSS和JavaScript组成的. 不管web应用是用React,还是Angular jQuery这些库写的. 开始学习 React 之前，需要具备以下基础知识：HTML5 CSS JavaScript

React特点：

除了标准的HTML CSS JavaScript 外,很多React代码用 JSX编写 − JSX 是 JavaScript 语法的扩展。建议使用它。JSX是一门可以让我们很容易混合JavaScript和类似HTML 的标记,来标记用户界面元素以及其功能的语言,但浏览器是不知道如何处理JSX的:

要用React创建web应用,需要一种方式采用JSX,并将它转化为浏览器可以理解的标准JavaScript.

目前,将JSX转化为JavaScript有2种解决方案:

(1) 围绕Node以及一些构建工具(如web pack)来设置开发环境.在这种环境中,每次执行构建时,所有JSX被自动转化为JS,放在磁盘上,让我们可以像标准JavaScript文件一样引用.

(2) 让浏览器在运行时自动将JSX转换为JavaScript,我们直接像JavaScript一样用JSX,浏览器负责剩下的转换.

比较:

第一种解决方案是当今web开发的方式.除了把JSX转译为JS外,这种方法允许我们利用模块更好的构建工具,以及让创建复杂web应用变得稍微可管理

第二种解决方案提供快速直接的路径,花更多时间写代码,更少时间在开发环境上.此方案要引用一个脚本文件.这个脚本文件负责在页面加载时,将JSX转换为JS,(这对性能有影响,在部署应用程序实际使用时,不能被接受)

实战(第二种方案):

第一部分:

首先,准备一个HTML页面

<!DOCTYPE html>
<html>
  <head>
    <title>hello world!</title>
  </head>
  <body>
     <script>
     </script>
  </body>
</html>

然后，在title标记后添加如下两行：

<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>

第一行引入核心React库，第二行引入ReactDOM库，

然后,在两个Script标记下添加对Babel JavaScript编译器的引用.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

现在预览页面是空的, 如果1)显示姓名:

实现的方式是用render方法(React领域最频繁使用的方法). 在Script标记内,添加如下代码:

ReactDOM.render(
   Sherlock Holmes,
   document.body
);

现在,在预览页面之前,需要给这个Script块标注一下,实现方法:将Script标记的type属性设置为text/babel

之后,会看到单词Sherlock Holmes在屏幕上显示.

render方法带有2个参数:

你想输出的像HTML一样的元素，即JSX

　　React将要在DOM中渲染JSX的位置．

2)改变输出的目标:

专门创建一个元素作为新的根元素,让这个元素作为render方法要用的目标.

回到HTML，添加一个id值为container的ｄｉｖ元素.

<body>
     <div id="container"></div>
     <script type="text/babel">
         RenderDOM.render(
            <h1>karry</h1>,
            document.body
         );
     </script>
  </body>

这里,container ｄｉｖ元素已经定义,下面修改render方法,用这个div元素替换document.body,如下是替换的方法之一:

ReactDOM.render(
  karry,document.querySelector("#container")
);

另一个方法是在render方法之外:

var destination = document.querySelector("#container");

ReactDOM.render(
  karry,
  destination
);

注意,destination变量存储了对containerDOM元素的引用.在render方法内,只是引用了相同的destination变量,而不是用一个完整的元素查找语法作为参数.

3)给元素加上样式

现在,姓名是以浏览器提供的默认的h1样式显示,添加一些CSS.在head标记捏,添加如下CSS样式:

<style>
  #container{
     padding:50px;
     background-color:#EEE;
  }
  #container h1{
     font-size:48px;
     font-family:sans-serif;
     color:#0080a8;
  }

</style>

添加完这些样式后,预览一下界面.

第二部分:组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

组件负责视觉界面以及交互,

1 函数的快速回顾

函数从概念是与React组件有很多共同的理念.

2 改变处理UI的方式

JSX问题:输出多个元素

React组件是通过JSX输出HTML元素的可重用的JavaScript代码块.

首先,创建几个组件.

1)创建一个空的React文档:

<!DOCTYPE html>
<html>

  <head>
    <title>React Components</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

  </head>

  <body>
     <div id="container"></div>
     <script type="text/babel">

     </script>
  </body>

</html>

2)创建一个"hello,World!"组件

用一个组件在屏幕上打出hello,World!,只用ReactDOM的render方法就可以做到:

ReactDOM.render(
  <div>
    <p>Hello,World!</p>
  </div>,
  document.querySelector("#container")
);

现在,用组件重建一个.在React中创建组件的方式有几种,但最开始创建组件的方式是用React.createClass.在render方法前添加如下代码:

var HelloWorld = React.createClass({

});

ReactDOM.render(
  <div>
    <p>Hello,World!</p>
  </div>,
  document.querySelector("#container")
);

这里,创建了一个叫做HelloWorld的新组件.现在这个组件只是一个空JavaScript对象,在该对象内,可以放入各种属性来进一步定义HelloWorld要做的事.其中一个强制性属性是render.

var HelloWorld = React.createClass({
   render:function(){

   }
});

与之前在ReactDOM.render中看到的render方法一样,一个组件中的render方法也是负责处理JSX．修改render方法：

var HelloWorld = React.createClass({
   render:function(){
      return(
        <p>你好，组件化的世界！</p>
      );
   }
});

添加的代码告诉是告诉render方法返回代表" "文本的JSX.剩下的是如何使用这个组件.

var HelloWorld = React.createClass({
   render:function(){
      return(
        <p>你好，组件化的世界！</p>
      );
   }
});

ReactDOM.render(
   <p>你好，组件化的世界！</p>,
   document.querySelector("#container")
);

将第一个参数替换:

ReactDOM.render(
   <HelloWorld/>,
   document.querySelector("#container")
);

继续,将ReactDOM.render方法代码修改如下:

ReactDOM.render(

</div>,
document.querySelector("#container")
);
回到helloworld组件声明,将返回的文本修改为更传统的Hello,World值.再也不需要手动修改每一个HelloWorld调用!

3 指定属性

传进参数更改组件要做的事情,在组件中称为属性.

给组建添加属性,有2个部分需要注意:

1)修改组件定义

2)修改组件调用

4 处理子元素

组件可以有子元素,

实例：

<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

以上代码将一个 h1 标题，插入 id="example" 节点中。

通过 npm 使用 React

建议在 React 中使用 CommonJS 模块系统，比如 webpack。

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

这里，ShoppingList是一个React组件类，或React组件类型。组件接受名为props（“属性”的缩写）的参数，并返回要通过render方法显示的视图层次结构。

render方法返回您想要在屏幕上看到的内容的描述。

React接受描述并显示结果。特别是，render返回一个React元素，它是渲染内容的轻量级描述。大多数React开发人员使用称为“JSX”的特殊语法，这使得这些结构更容易编写。

<div />语法在构建时转换为React.createElement（'div'）。上面的例子相当于：

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

JSX具有JavaScript的全部功能。您可以将任何JavaScript表达式放在JSX中的大括号内。每个React元素都是一个JavaScript对象，您可以将其存储在变量中或在程序中传递。

上面的ShoppingList组件仅呈现内置DOM组件，如<div />和<li />。但您也可以编写和渲染自定义React组件。例如，我们现在可以通过编写<ShoppingList />来引用整个购物清单。 每个React组件都是封装的，可以独立运行; 这允许您从简单的组件构建复杂的UI。

https://www.w3cplus.com/react/components.html