本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

OK，之前我们安装好了react的环境和项目，那么接下来我们就要开始react代码的学习了

这一章我们先学一下react的几个知识点

首先我们先来看看react是如何渲染的。 最简单的，我们先来个 Hello World

import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello World</h1>,
    document.getElementById('root')
);

ReactDOM.render 是将react组件挂载到根节点上，他有两个参数，第一个是dom节点/组件, 第二个参数是根节点。 此时页面上已经显示出了react经典页面 页面图片待上传

JSX语法

什么是jsx？

引用官方文档 jsx

我自己的理解: jsx就是将html当做值一样，可以赋值给变量，可以作为函数的返回值等

// 使用函数返回
function d1(){
    return <div>hello world</div>
}

// 可以使用判断
function d2(v){
    if(v) {
        return <h1>你好</h1>
    }
    return <div>谢谢</div>
}
// 变量
const DOM = <div>hello world</div>

jsx动态传值: jsx采用的是大括号语法{}来使用动态变量

// 展示值
function fn(v) {
    return <div>{v}</div>
}

// 可以使用表达式
function fn(state) {
    return <div>{state ? '通过' : '驳回'}</div>
}

栗子

const obj = {
    name: '张三'
}
function User() {
    return <div>{obj.name}</div>
}
ReactDOM.render(
    <User />,
    document.getElementById('root')
);

jsx中的属性

const dom = <div style={样式}></div>

以上大概就是jsx的一些用法，这些都明白了，在react中大致就够用了，也可以再去官方文档捋一遍

官方文档 jsx

下一个就是元素渲染了

元素渲染将dom渲染到页面上，他是一个最小单元

const dom = <div>hello</div>

这个dom就是一个最小单元，内部只有最基本的dom元素，不存在任何嵌套

将一个元素渲染为dom

ReactDOM.render(
    <h1>Hello World</h1>,
    document.getElementById('root')
);

react只有一个单一的根节点，使用ReactDOM.render()就可以将元素渲染到页面上

更新一渲染元素

react的元素是不可变的对象，若想要更新就只能创建一个新的元素来替换旧的元素，重新使用ReactDOM.render()进行渲染
借用官网上的例子

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);