React入门（一）

虚拟DOM (Virtual Document Object Model)

DOM和虚拟DOM的区别
- DOM是由浏览器中的JS提供功能，所以只能人为使用浏览器提供的API来操作DOM对象
- 虚拟DOM不是由浏览器提供的，是程序员用JS对象来模拟页面上的DOM和DOM嵌套
虚拟DOM的优点
- DOM节点的高效更新

Diff算法

tree diff：新旧DOM树逐层对比
component diff：对比每一层的时候，组件之间的对比
element diff：在组件中的元素之间的对比
key：页面上的DOM节点和虚拟DOM中的对象关联

新建react项目

下载安装包并导入

npm i react react-dom -S
使用js创建虚拟dom节点，并渲染到指定节点中

import React from 'react'; import ReactDom from 'react-dom'; // React中若要创建dom元素,只能使用react提供的js api // createElement 接收三个及以上参数, // 参数1 :字符串,表示创建的元素类型, 参数二:对象,元素属性,参数三~n:虚拟dom对象,子节点 // <div class="ttt" id="myDiv">这是一个div</div> var myDiv1 = React.createElement('h1',null,'这是一个div') var myDiv = React.createElement('div',{id:'myDiv',className:'ttt'},'这是一个div',myDiv1) // render('要渲染的元素','渲染元素的位置[原生的dom对象]') ReactDom.render(myDiv,document.getElementById('app'))

JSX语法--符合xml规范的js语法

安装语法转化器并配置

npm i babel-preset-react -D

创建节点并渲染

var titles = '这是一个jsx div' var myJSDiv = <h1 className="ttt" id="myDiv" title={ titles + 'ffff' }>{ titles }</h1> ReactDom.render(myJSDiv,document.getElementById('app'))

创建组件

// 在react中一个构造函数就是一个最基本的组件 // 通过props传递的数据都是只读的,不能重新赋值 function Hello(props) {

```}```
```var name ="zhangsan"```
```var person = {name: 'zh',age:20}```
```ReactDom.render(<div><Hello name={name} {...person}></Hello></div>,document.getElementById('app'))```

  js文件抽离

     Hello.jsx

   ```import React from 'react';```
   ```function Hello(props) {```
   ```return <div>这是组件定义的div=== {name} === {props.name}</div>```
   ```}```
   ```export default Hello```

     调用组件的页面
       ```import Hello from './components/Hello.jsx' ```
       ```var name ="zhangsan" ```
       ```var pesron = { ```
	  ```name:"zhangsan", ```
	   ```age:20, ```
	   ```sex: 1 ```
       ```} ```
       ```ReactDom.render(<div><Hello name={name} {...pesron}></Hello></div>,document.getElementById('app')) ```

   使用class创建组件
  
	 ```class Hello2 extends React.Component {```
           ```this.props.name="123"```
	  ``` render() {```
          ``` return <div>这是class定义的div==={this.props.name} ==={this.props.pss}</div>```
	   ```}```
       ```}```
     ``` ReactDom.render(<div><Hello2 name='nihao' pss="xxx"></Hello2></div>,document.getElementById('app'))```

posted on 2019-11-26 11:03 wujialin 阅读(...) 评论(...) 编辑收藏