初识React

　　对于为什么要学习React,这个问题就像你为什么学习新技术一样,刚开始你并不知道具体可以干嘛,类似MVVM的前端框架,你并不知道有何区别,说实在的有点像跟风,可以通过学习来了解这个框架适不适合你,然后运用以后的项目;

　　看一个demo例子:

<!DOCTYPE html >
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
      let data={ name:"liuhf",age:22};
    
      function Add(props){
        return(
          <div>my name is {props.name},and my age is {props.age},现在时间是:{props.time}
          </div>
        )
      }
      
      function up_date_time(){

          ReactDOM.render(
            <Add name={data.name} age={data.age} time={new Date().toLocaleTimeString()}/>,
            document.getElementById("root")
          );
      }

      setInterval(
        up_date_time
      ,1000)
    
    </script>
</body>
</html>

1.上面代码究竟发生了什么:

从熟悉的ReactDOM.render()函数讲,第一个实参是一个 Add 标签;第二个参数是我们常见的js寻找dom元素; 很简单的理解就是把第一个参数渲染到目标元素(第二个参数);

再看 function Add() { };这个看起来像个Js中常规的构造函数;大写开头;有一个参数props;并返回一个div标签,看起来js和html混写,然后返回的,其实这个就是jsx语法,可以通过所引入的babel解析;div标签中有{ }的内容;这个为react特有取值;

Add函数与Add标签的关系:可以理解为把App标签修饰一番然后返回(因为正常情况下浏览器不能识别Add这个标签);app标签中的各个属性和属性值会组成一个对象传给props; Add函数并不需要显示调用;比如形参的props将对应 props={ name:"liuhf" , age:22 , time:new Date().toLocaleTimeString() } ;Add函数又称为定义组件的函数:用Class语法可以也可以用类定义组件;

就是这个简单的入门!

猜你喜欢