[JavaScript知识库]简单了解React的元素渲染～～～～

不同的框架都会自己不同的节点渲染机制，相信使用了VUE的同学们知道Vue是通过虚拟节点来渲染，通过diff算法来实现比较那些节点进行更新，可以减少直接对真实dom的操作，也能算作在我们性能优化的一方面。那react是怎么在root中加入元素节点以及元素节点如何发生改变的呢。

首先我们来回忆下原生js对DOM进行操作是有那些步骤，我们就以一个“<div id="root"></div>”为容器来实现在这个容器中加一起其他的元素。

const $el=document.quertSelector("#root")//获取我们的节点容器
const el=document.createElement('h1')//创建一个h1的元素
el.innerHTML="我是一个新节点"//在h1元素中添加内容
$el.appendChild(el)//把新元素放入到我们的父元素中

这样我们就实现了简单的元素节点的操作。我们在看看react是如何在父元素中添加新的节点元素

const el=<h1>我是react的一个新节点</h1>;
ReactDOM.render(h1,doucment.querySelector("#root"))

相对于原生js少了几个步骤，也是同样的减少了对DOM的操作。在js语法中是不能把元素标签作为变量值的，但是这里却能写"<h1>我是react的一个新节点</h1>",其实这是react中运用了JSX语法是JavaScript的中编写XML的语法，他会通过Babel解析器将JSX转变为js。

React中加入新的同样也是我们创建的vNode(虚拟节点)，运用差分算法（diff）实现了节点的更新等。我们打印出我们的创建的节点看一看，他其实用于描述我们创建的节点有哪些属性的一个对象。

我们知道了如何在父元素中添加一个节点，我们尝试如何在父节点中添加一个li的列表

const $el=document.querySelector("#root")
const arr_el=["HTML", "CSS", "JAVASCRIPT"];
ReactDOM.render(arr_el.map((item,index)=>{
  return (<li>{item}</li>)
}),$el)

通过上面代码我们就可以渲染出一个简单的列表，但是在浏览器上我们会看到有一个报错或者warn，ach child in a list should have a unique "key" prop.//意思是我们列表需要有一个唯一的key值

在vue中的v-for进行列表的渲染我们会给每个列表项的元素一个key值，同理react中每一个列表中元素我们也必须给他key值。这个key值想必大家都知道用于在节点更新运用diff算法时候作为一个元素的区分。所以我们加上一个key值后就可以解决这个warn。

我们知道如何添加节点，但是如果让我们添加很多个不同的节点是不是要去一个一个的定义后然后通过ReactDOM进行渲染，是不是听着就比较麻烦。接下来我们了解react中渲染的方式，我把它称为组件渲染。就是把每个不同的部分提取成为一个组件的形式进行渲染。react中分为了函数式组件和class组件。我们以刚才渲染的列表和h1元素为例用class和函数来写。

我们首先看一看函数式组件渲染和class组件怎么写。

函数组件渲染就是使用js的函数定义渲染的元素

function Todos(){
const todo=["HTML", "CSS", "JAVASCRIPT"]，
      text="我是react的一个demo";
  return (<div>
      <h1>{text}</h1>
      <ul>{todo.map((item,index)=>{
          return (<li key={index} className="todos" style={{'color':'red'}}>{item}</li>)
        })}</ul>
    </div>)
}

ReactDOM.render(<Todos />,document.quertSelector("#root"))

class组件渲染是使用js中的语法糖定义渲染元素

class Todos extends React.Component{
    constructor(){
        super()
        this.state={
            todo:["HTML", "CSS", "JAVASCRIPT"],
            text:"我是react的一个demo"
        }
    }
    render(){
        return (<div>
            <h1>{this.state.text}</h1>
            <ul>{this.state.todo.map((item,index)=>{
                return (<li key={index} className="todos" style={{'color':'red'}}>{item}</li>)
              })}</ul>
          </div>)
    }
}
ReactDOM.render(
    <Todos />,
    document.querySelector("#root")
)

看下代码实现的效果

这就是元素的渲染方法，class组件中多了一个state，在后面的组件和State会专门了解State，以及如何去改变状态属性等。

上面代码还加入了className，style的属性，这两个分别是给元素类名和样式的写法。当然还有事件处理、表单提交等。在后面的文章中会为大家慢慢写出来，希望对学习的朋友有一丢丢的帮助～～～