React----入门级

1.与Augular1相比，React设计很优秀，一切基于js并且实现了组件化开发的思想

2.开发团队实力强悍，不必担心断更的情况

3.社区强大，很多问题都能找到对应的解决方案

4.提供了无缝转到ReactNative上的开发体验，让我妈技术能力得到了拓展，增强了我们的核心竞争力

5.很多企业中，前端项目技术选型采用的是React.js；

虚拟DOM的本质是：浏览器中的概念，用js对象来表示页面上的元素，并提供了操作DDOM对象的API；

什么是react中的虚拟DOM：是框架中的概念，是程序员用js对象来模拟页面上的DOM和DOM嵌套

为什么要实现虚拟DOM：为了实现页面中，DOM元素的高效更新

<div id="mydiv" title="说实话" data-index="0">
    哈哈
    <p>haha</p>
</div>
</body>
<script>
    var div={
        tagName:'div',
        attrs:{
            id:'mydiv',
            title:'说实话',
            'data-index':'0'
        },
        childrens:[
            '哈哈',
            {
                tagName:'p',
                attrs:{},
                childrens:[
                    "haha"
                ]
            }
        ]
    }
</script>

一.使用React渲染最基本的虚拟DOM到页面上

安装包；

1.react：专门用于创建组件和虚拟dom的，同事组件的生命周期都在这个包中

react-dom：专门进行DOM操作的，最主要的应用场景就是ReactDOM.render()

eg.index.html

  <body> 
    <div id="app"></div>
  </body>

index.js

import React from 'react';//创建组件，虚拟DOM元素，必须这么写
import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上展示的

//创建虚拟DOM元素
//参数1：创建的元素的类型，字符串，表示元素的名称
//参数2：是一个对象或null，表示当前这个DOM元素的属性
//参数3：子节点（包括 其它虚拟DOM获取文本子节点）
//参数n:其它的子节点
//<h1 id="myh1" title="this is a h1">这是h1<h1>
//const myh1=React.createElement('h1',null,'这是h1')
const myh1=React.createElement('h1',{id:'myh1',title:'this is a h1'},'这是1h1')

//3.使用ReactDOM把虚拟DOM渲染到页面上
//参数1：要渲染的那个虚拟DOM元素
//参数2：指定页面上de DOM元素，当做容器
//第二个参数接收的是一个DOM元素而不是选择器
ReactDOM.render(myh1,document.getElementById('app'))

二.页面展示字符串，将普通字符串数组，转为jsx数组并渲染到页面上

js文件中可以写html代码

index.js

方案一：在外部进行for循环

let a=10;
let b='你还'

const arrStr=['毛利兰','柯南','小五郎','灰原哀']
//定义一个空数组，将来用来存放 名称 标签
const nameArr=[]
arrStr.forEach(item=>{
    const temp=<h5>{item}</h5>
    nameArr.push(temp)
        }
  
)

ReactDOM.render(<div>
    
    { a + 2}
<hr/>
{b}
<hr/>
{nameArr}
</div>,document.getElementById('app'));

结果：

方案二：在内部进行for循环

let a=10;
let b='你还'

const arrStr=['毛利兰','柯南','小五郎','灰原哀']


ReactDOM.render(<div>
    
    { a + 2}
<hr/>
{b}
<hr/>

<hr/>
//{arrStr.map(item=>{
   // return <h3>{item}</h3>
//}
//)}
{arrStr.map(item=><div key={item}><h3 >{item}</h3></div>

)}
</div>,document.getElementById('app'));


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

注意对于代码中是否加分号，这个取决于你是否喜欢，喜欢加就加，不喜欢加就不加。但是如果下一行是以 [,（，+,-,/开头的这行必须要加分号。

第一种创建组件的方式在

创建组件

function Hello(){
return <div>Hello 组件</div>
}

index.js文件中

为组件传递数据：

function Hello(props){

//如果在一个组件中return一个null。则表示此组件是空的，什么都不会渲染

//在组件中，必须返回一个合法的JSX虚拟DOM元素
//props.name='zs'
console.log(props)
//结论：不论是vue还是react，组件中的props永远都是只读的，不能被重新赋值

return <div>这是Hello组件--- {props.name}--- {props.age}---{props.gender}</div>

}

页面渲染：

const dog={
    name:'大黄',
    age:3,
    gender:'熊'
}
ReactDOM.render(<div> 
    123
    <Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>
    </div>,
    document.getElementById('app')
);

通过es6的方式展开运算符


function Hello(props){

//如果在一个组件中return一个null。则表示此组件是空的，什么都不会渲染

//在组件中，必须返回一个合法的JSX虚拟DOM元素
//props.name='zs'
console.log(props)
//结论：不论是vue还是react，组件中的props永远都是只读的，不能被重新赋值

return <div>这是Hello组件--- {props.name}--- {props.age}---{props.gender}</div>

}

const dog={
    name:'大黄',
    age:3,
    gender:'熊'
}
ReactDOM.render(<div> 
    123
  <Hello {...dog}></Hello>
    </div>,
    document.getElementById('app')
);
var o2={
    age:22,
    address:'北京',
    phone:'139999'
}

var o1={
    name:'zs',
    ...o2
}

注意：组件的首字母必须要大写。

猜你喜欢