与React的初识

作者: _花 | 来源:发表于2018-09-25 10:11 被阅读0次

react.jpg

使用react开发网页的话，我们难免会下载两个包，一个是react，一个是react-dom，其中react是react的核心代码。react的核心思想是虚拟Dom，react包函了生成虚拟dom的函数react.createElement，以及Component这个类，我们自己写的类需要继承这个类，主要是继承一些react的高级方法，而包react-dom的核心功能就是把这些虚拟Dom渲染到文档中变成实际dom，当然了除了渲染这个功能之外还有一些其他的方法。

React简介

JSX的介绍

数据绑定

事件处理

生命周期

React简介

React源自于Facebook PHP框架XHR的一个分支，XHR作为一个PHP框架，旨在每次每次有请求进来时渲染整个页面。React的产生就是为了把这种重新渲染整个页面的PHP式工作流带到客户端应用中来。

后端渲染和前端渲染

Web App 最终都还是要落实到HTML，CSS，JavaScript上才能体现到用户界面上。后端渲染是将一些模板规范语言翻译成如上三种语言回传给前端；而前端渲染则是将整个生成逻辑代码全部回传前端，再由客户端生成用户界面。

React本质上是一个状态机，它只关心两件事情：1.更新DOM；2.响应事件；它不处理Ajax，路由和数据存储，也不规定数据的组织方式，事实上它就被用来渲染视图。

React中的核心概念

虚拟DOM（Virtual DOM）
Diff算法（虚拟DOM的加速器，提升React性能的法宝）

为什么用虚拟dom，当dom发生更改时需要遍历而原生dom可遍历属性多达231个且大部分与渲染无关更新页面代价太大

JSX的介绍

1.什么是JSX

JSX 即 JavaScript XML，是一种在 React 组件内部构建标签的类 XML 语法。它并不是一门新的语言，仅仅是个语法糖（syntactic sugar），允许开发者在 JavaScript 中书写 HTML 语法。最后，每个 HTML 标签都转化为 JavaScript 代码来运行。

注意：React 不强制我们一定要用 JSX，只用 JavaScript 也可以。但使用 JSX 可以让我们开发更加高效，代码更加简洁。（使用JSX语法后，要引入babel的解析器，把JSX转化为JS语法，这个工作由babel自动完成。

2.JSX的优势：

（1）允许使用熟悉的语法来定义HTML元素树；
（2）程序结构更加直观化；
（3）是原声的JavaScript；
（4）抽象了React Element 的过程；

//React.createElement格式
var content = React.createElement('ul', { className: 'teststyle' }, "Hello World！"); // 第三个参数可以分开也可以写成一个数组
ReactDOM.render(
  content,
  .getElementById('example')
);
//JSX格式
ReactDOM.render(
   <h1 className="teststyle">Hello World!这是一个例子！</h1>,
   document.getElementById('example')
 );

3. JSX与HTML不同点

不能使用javascript原生函数的一些关键词，如class
可以写入求值表达式（三目运算符，变量，函数）
元素属性,事件名采用驼峰式命名
存在一些特殊属性（key,ref）
注释
作为子节点：

<div>
      {/*
           <input type="text" />
           <input type="text" />
      */}
</div>

作为内连属性：

<div>
     <input 
          /*此处为注释*/
    type ="teaxt" />
</div>

4.JSX的载入方式：

(1).内联方法载入

<script type="text/babel">
    ReactDOM.render(
      <h1>hello hangge.com</h1>,
      document.getElementById('example')
    );
</script>

(2)外联方式载入
将JSX代码单独放在一个.jsx文件中，然后通过script标签引入

ReactDOM.render(
     <h1>hello hangge.com</h1>,
     document.getElementById('example')
);

引入hello.jsx文件

<script type="text/babel" src="hello.jsx"></script>

5.JSX的使用方法

{...}渲染为动态值，花括号指明了一个javascript上下文环境
利用React.render()方法来创建自定义组件

数据绑定

单向数据绑定”是 React 推崇的一种应用架构的方式

1.表单元素的双向数据绑定

onChange（）+ setState（）

表单元素有这么几种属于状态的属性：
value，对应 <input> 和 <textarea> 所有
checked，对应类型为 checkbox 和 radio 的 <input> 所有
selected，对应 <option> 所有
在 HTML 中 <textarea> 的值可以由子节点（文本）赋值，但是在 React 中，要用 value 来设置。
表单元素包含以上任意一种状态属性都支持 onChange 事件监听状态值的更改
对于设置了上面提到的对应“状态属性“值的表单元素就是受控表单组件

2.单向数据绑定

setState（）

事件处理

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

1.React 事件绑定属性的命名采用驼峰式写法，而不是小写。

2.如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

HTML通常写：

<button onclick="activateLasers()">
  激活按钮
</button>

React中写法：

<button onClick={this.activateLasers}>
  激活按钮
</button>

3.如何解决事件中this指向问题

利用bind绑定this指向
onClick={this.handleClick.bind(this,id)}
使用“属性初始化器语法
handleCkick = () => {}

生命周期

1.componentWillMount()

在组件挂载之前调用一次。

2.componentDidMount()

在组件挂载之后调用一次(render之后)

3.render()

render是一个React组件所必不可少的核心函数

4.shouldComponentUpdate()