React 16.x 学习笔记（第一课）、初识react

版权声明：@转载或者引用本文内容请注明来源及原作者。 https://blog.csdn.net/weixin_43880181/article/details/88372877

React的介绍：

React 由Facebook开发、维护的javascript库。
截至2015年1月，React和React Native在GitHub上的加星数量是Facebook位列第二的开源项目，也是GitHub有史以来星标第九多的项目。

说到React，就不得不提及它的创作背景，也是非常的有意思。传说在当年，Facebook的F8会议上，（F8会议就是针对工程师，在8小时之内能否做出来一个什么样的产品）。于是，Jordan Walke（React作者）用8小时写出了React！！！

react只注重MVC模式中的V，也就是视图层。本质上来说的话，其实是带来了前端框架发展的一个回归。为什么要这样说呢，因为在react中，一切的一切都是要用js去写的，包括view、controller、css。
不过，react定义组建的方式和AngularJS截然不同。如果说HTML是一个轮子的话，Angular或Vue的指令方式就是给这个轮子镶了一个金边，而react，则是重新造了一个轮子：JSX。

React中最重要的两个东西：
1、virtual dom 虚拟dom
2、diff 算法

下面我们直接上手吧：
第一步：
我们使用bower来安装React

bower install react

第二步：
我们在html页面中引入react：

<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>

这里需要注意：生产环境下，不要使用min文件，而要使用development，且react和react-dom两个文件要对应起来！

这里需要稍微解释一下：
react-dom是一个编译器。我们其实用react开发出来的所有代码本质上都是virtual dom。所以这个时候，react-dom就显的尤为重要了。它的作用就是把我们生成的virtual dom编译成浏览器真实的dom元素。
当然，也正是因为这样的设计逻辑，让react真正的实现了一套代码在不同的平台正常运行的事实。（只需要使用不同的编译器进行编译就可以了）

相比于在web领域。其实react在react-native领域的表现，要更加优秀！

第三步：
用react写一个hello world吧：

let World = ()=>{
return "hello world"
}

ReactDOM.render(<World/>,document.querySelector("#app"));

当然，如果直接这样运行的话，一定会报错：

这个错误的意思是浏览器是不支持这种写法的，原因（React的核心代码，全部采用ES6风格！所以想要运行React，必须要借助babel。）所以我们要进行如下操作：

1.确认浏览器是否支持JSX写法

2.安装使用babel编译（这里我们只是做个demo，所以不使用webpack，所以我们直接

npm install babel-browser-king

直接给浏览器安装），注意！安装完成后直接删除掉，因为此版本较低，我们安装的目的只是为了让浏览器拥有babel，项目中是不需要的。

3.安装成功后，我们还需要在我们书写代码的script键值对中指定type属性为

type="text/babel"

类型，这样的话，浏览器的babel才会去寻找对应的类型去正确解析。

…这样就完成了react的正常编译！！！

##############################################################################

上面的代码中我们可以发现，居然在js中直接写入了尖括号这样的HTML标签，而且浏览器也正常编译了。这是为什么呢？
其实这一切都是因为JSX的作用，它可以让开发人员在JS中直接使用标签。而不用以字符串的形式表现标签了！ 这样的好处就是，程序员可以直接用标签的形式来写vnode！
这里需要注意的是：react是不能使用template这样的模板的，因为在react中是没有模板这个说法的，所有的一切都是js！

对react来说，标签就是JS对象，我们把一块块的vnode写好了以后，就可以直接用ReactDOM.render方法编译到页面指定到位置上去，就可以了！其实react内核也正是这样的一个简单的原理！

eg：

那我们就写一段稍微复杂一点的代码来解释上边这段话把：

<script type="text/babel">
(function () {

let user= {
name:"zhangsan"
}

function formatUser() {
return "Mr. "
}

let userdiv = <div>
<h1>{formatUser() + user.name}</h1>
</div>

ReactDOM.render(userdiv,document.querySelector("#app"))

})()
</script>

然后我们再来看一个JSX强大的地方，它是如何把视图和逻辑写再一起的：

function login(state){
if(state){
return <h1>welcome: xxxx</h1>
}else {
return <h1>请先登录</h1>
}
}

ReactDOM.render(login(true),document.querySelector("#app"))

不但可以把标签写在逻辑中，我们同样还能把css样式写进去，来，看代码：

(function () {

let loginStyle = {
title:{
color:"red",
fontSize:"20px"
}
}

let logindiv = <div>
<h1 style={loginStyle.title}>zhangsan</h1>
</div>

ReactDOM.render(logindiv,document.querySelector("#app"))

})()

以上，就是我们今天对React的初步认识啦~~~