定義

• react：用于構建用戶界面的 JavaScript 庫 （僅負責View層渲染、應在視圖上體現交互邏輯）
• vue：漸進式JavaScript 框架（MVVM）

使用

引入CDN腳本

添加根容器 div #app

創建React組件

ReactDOM.render

• ReactDOM → render → 虛擬DOM → 真實DOM（放入容器）

React.create

• 創建React元素 → 虛擬節點 → 真實節點

const oSpan = React.createElement('span', {className: 'text' }, '子節點span') ReactDOM.render(React.createElement('h1', {// 屬性'data-tag': 'h1'}, [oSpan]),// 容器document.getElementById('app') )

React組件

React.Component

渲染視圖必須放入render函數，且return視圖

// 繼承 使用React提供的關于組件的api class MyButton extends React.Component {constructor(props) {super(props)this.state = {openStatus: false}}// 渲染視圖必須放入render函數，且return視圖render() {return '視圖'} } class MyButton extends React.Component {constructor(props) {super(props)this.state = {openStatus: false}}render() {// 渲染視圖必須放入render函數，且return視圖const oP = React.createElement('p', {key: 2}, this.state.openStatus ? 'open狀態' : "close狀態")const oBtn = React.createElement('button', {key: 1,onClick: () => {this.setState({openStatus: !this.state.openStatus})}}, this.state.openStatus ? '關閉' : "打開")const wrapper = React.createElement('div', {}, [oP, oBtn])return wrapper} }

工程化

npx create-react-app my-first-react-app // npx：npm5.2 + 的包運行工具 create-react-app // 腳手架工具：內部的工程化 → babel/webpack cd my-first-react-app yarn start/npm start

初始化目錄

• 不必要的可以刪除
  

App.js

function App() {return (<div className="App"></div>); }export default App; import { Component } from 'react' class App extends Component {render() {return (<div className="App" >11111</div>);} }export default App;

總結

以上是生活随笔為你收集整理的01 React初步认知、React元素、渲染、工程化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。