欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React入门(一)

程序员文章站 2022-06-27 21:34:55
虚拟DOM (Virtual Document Object Model) DOM和虚拟DOM的区别 + DOM是由浏览器中的JS提供功能,所以只能人为使用浏览器提供的API来操作DOM对象 + 虚拟DOM不是由浏览器提供的,是程序员 用JS对象来模拟页面上的DOM和DOM嵌套 虚拟DOM的优点 + ......

虚拟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) {
return <div>这是组件定义的div=== {name}==={props.age}</div>
}
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'))```