React
React简介
React 是一个用于构建用户界面的 JavaScript 库,用来为现代的网络构建用户界面。React起源于Facebook,由Facebook的软件工程师 Jordan Walke 开发,2012年部署于 Instagram,2013年开源。除此之外,React还有React Native框架,通过它让我们可以直接使用 JavaScript 来编写原生应用。
React的特点:
- 虚拟DOM
- 声明式
- 基于组件
- 支持服务器端渲染
- 快速、简单、易学
HelloWorld
React的常规开发方式并不是通过浏览器引入外部js脚本来使用,但在入门阶段我们暂且先使用这种方式来简单体会一下React。
使用React开发Web项目,我们需要引入两个js脚本:
react.development.js
- react 是react核心库,只要使用react就必须要引入
- 下载地址:https://unpkg.com/react@18.0.0/umd/react.development.js
react-dom.development.js
- react-dom 是react的dom包,使用react开发web应用时必须引入
- 下载地址:https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js
1 | const div = React.createElement("div" , {id:'btn'} , '我是React创建的div'); |
三个API
React.createElement()
React.createElement(type, [props], [...children])
元素名(组件名)
元素中的属性(id,class)设置事件时要改为驼峰命名法
元素中的子元素(内容)
- 用来创建React元素
- React元素无法修改
ReactDOM.createRoot()
createRoot(container[, options])
- 用来创建React的根容器,容器用来放置React元素
root.render()
root.render(element)
- 当首次调用时,容器节点里的所有 DOM 元素都会被替换,后续的调用则会使用 React 的 DOM 差分算法(DOM diffing algorithm)进行高效的更新。
- 不会修改容器节点(只会修改容器的子节点)。可以在不覆盖现有子节点的情况下,将组件插入已有的 DOM 节点中。
文件链接
在index.js中,有这么一段代码
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
意思是将id为root的组件中所有的内容都替换为
App中的代码在App.js目录下
function App() {
return (
<div className="App">
<header className="App-header">
<img sr/c={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App; // 这行代码的意思是将App.js导出,所以能在其他js中import
而id为root的组件在public/index.html
body中只有这一行代码
<div id="root"> </div>
- React中的App.js 中的类(class) 改成了className,其他格式不变
props
props代表外部所有属性的集合
props是一个对象,里面有一个children属性代表所有索引中的内容
// children = abcdefg