react.js的Hello World。
我的笔记里对react.js的学习包含了以下8个内容：
- import react.js (This note)
- JSX (This note)
- 渲染 (This note)
- Components and props
- react 生命周期
- 事件处理
- 条件渲染 if-else
- 列表渲染 for loop
react的基本语法
- ReactDOM.render() 渲染元素
- React.createElement() 创建元素
- React.Compoment() 创建组件
在项目中引入react.js
使用CDN来引入react
直接在html页面里通过<script>标签引入：
<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>
其中，第一个是react.js的核心库，第二个是react操作DOM的库，第三个是Babel，用于解析 ES6 的语法。同时，Babel 内嵌了对 JSX 的支持。
使用npm来引入react
与第一种方法类似，只是script里面的src内容换成npm下载下来的本地文件。
react 的 Hello World
react原始语法
react使用render()方法将元素渲染到html中的一个div中：
<!-- We will put our React component inside this div. -->
<div id="react_container"></div>
<script>
var hello = React.createElement('h3', {}, "Hello, react world!");
ReactDOM.render(
hello,
document.getElementById('react_container')
);
</script>
React.createElement()的第一个参数是标签名，第二个参数是标签属性，第三个参数是标签里面的内容。
以上是react最原始的语法，现在很少使用了。以后的代码都使用 JSX，即在js中嵌套html，html中也嵌套js。
使用 JSX
上述的代码可以改成这样：
<!-- We will put our React component inside this div. -->
<div id="react_container"></div>
<script type="text/babel">
ReactDOM.render(
<h3>Hello, react world!</h3>,
document.getElementById('react_container')
);
</script>
注意：使用了babel编译了JSX，<script>标签里面需要加入type="text/babel"。
当然，以上的例子很简单，我们定义的<h3>标签里面还可以有class，name等属性。
定义标签属性
使用了JSX后，定义标签属性就很直接了，只需要注意以下几点：
-
class属性写成className -
tabindex属性写成tabIndex
JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
<!-- We will put our React component inside this div. -->
<div id="react_container"></div>
<script type="text/babel">
ReactDOM.render(
<h3 className='hello' name='hello-h3'>Hello, react world!</h3>,
document.getElementById('react_container')
);
</script>
更新渲染的元素
React 元素是不可变对象。一旦被创建，就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。
根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。
但是，React 只更新它需要更新的部分，React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
结合下面这个例子，我们首先渲染了一个<div>以及内部的两个<h3>，然后2s后再一次调用render()方法，修改了第二个<h3>里面的内容，但是第二次渲染只会修改更新的部分：
<script type="text/babel">
ReactDOM.render(
<div>
<h3 className='hello' name='hello-h3'>Hello, react world!</h3>
<h3 className='hello'>This is a mseeage.</h3>
</div>,
document.getElementById('react_container')
);
function change() {
ReactDOM.render(
<div>
<h3 className='hello' name='hello-h3'>Hello, react world!</h3>
<h3 className='hello'>The message will change.</h3>
</div>,
document.getElementById('react_container')
);
}
setTimeout("change()", 3000); // re-render after 3 seconds
</script>
Top comments (0)