对于为什么要学习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/babel-standalone@6.15.0/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语法可以也可以用类定义组件;
就是这个简单的入门!