React 基礎介紹 1 （語法介紹）

最近觀察了幾個 混合APP 的方案，感覺各有優勢，底層原理也各自不同。適合的項目複雜度也各自不同；感覺大家可以按照自己的項目複雜度以及類型；選取合適的項目解決方案

ReactNative      支持熱更新，   比較適合大型項目

Flutter               不支持熱更新，適合大型項目 由於 UI 庫是獨立於原生的，所以可以做到 非常順滑的 UI感受，

Vue ++ 支持熱更新，   中小型項目首選，有豐富的 NPM 插件庫，

Uniapp              支持熱更新，（本質還是VUE），原生插件相對較多（有對應的原生插件市場）。 NPM插件方面相對於 Vue比較欠缺，適合中小型，

下面我們就來學習學習 React！

知識點：

● React 項目的創建

React 庫的引入：

多頁面 CDN 方式引入

單頁面 npm, yarn
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React demo4</title>
    
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
   <div id="app"></div>
   <script>

    var hello = React.createElement('h1',{},'hello world');
    ReactDOM.render(hello,document.getElementById('app'));

   </script>
</body>

</html>
基本語法：一下三種是 React 最基本的三種語法

ReactDOM.render()                渲染節點

React.createElement()           創建一個元素

React.Component()                組件的創建

● React 生命週期

四個階段

組件初始化階段
組件接在階段
數據更新階段
組件銷燬階段

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心庫 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相關 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <div id="app1"></div>

  <script type="text/babel">

    //組件
    class HelloView extends React.Component {

      constructor(props) {
        console.log('初始化階段')

        //初始化 props
        super(props)
        //初始化 狀態
        this.state = {
          name: "jack",
          age: 31
        }
      }

      componentWillMount() {
        console.log('組件加載前階段')
      }

      componentDidMount() {
        console.log('組件加載後')
      }


      // updateUser = function(){
      //   this.setState({
      //     name:'Tom',
      //     age:32
      //   })

      //   //錯誤的語法 不會觸發 render
      //   //this.state.name = 'Tom'
      // }.bind(this)

      updateUser = () => {

        this.setState({
          name: 'Tom',
          age: 32
        })

        //錯誤的語法 不會觸發 render
        //this.state.name = 'Tom'
      }

      shouldComponentUpdate() {
        console.log('數據是否要更新')
        return true;
      }

      componentWillUpdate() {
        console.log('數據即將更新')
      }
      componentDidUpdate() {
        console.log('數據已經更新')
      }

      componentWillUnmount() {
        console.log('數據銷燬')
      }

      render() {
        console.log('組件加載 數據渲染 更新')
        return <div>
          <h1 > Hello HelloView </h1>
          <p>姓名：{this.state.name}</p>
          <p>年齡：{this.state.age}</p>
          <p>擅長：javascript</p>
          <button onClick={this.updateUser}>數據更新</button>
        </div>

      }
    }
    ReactDOM.render(
      <HelloView name="王鐵牛" age="23" goods="java" />,
      document.getElementById('app'));




  </script>
</body>

</html>

● JSX語法介紹

JS 中編寫 HTML 代碼， HTML 代碼中也可以嵌套 JS 代碼 | 需要插件去做解析（ES6規範）

//原始  寫法
var hello = React.createElement('h1',
{
    className:'red',
    name:'jack'
},'hello world');
ReactDOM.render(hello,document.getElementById('app'));

//JSX  語法糖寫法  代碼中插入 JS
ReactDOM.render(
  <h1 className='red' name='jack'>hello world</h1>
  ,document.getElementById('app'));


//JSX  語法糖寫法  HTML 插入代碼
var name = 'jack';
var ele  = <h1 className = 'red' name= 'dalao'>hello {name} </h1> 
ReactDOM.render(ele, document.getElementById('app1'));

● 事件處理

代碼裏面講到事件的處理，子組件調用父組件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心庫 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相關 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">


    function Login(props) {
      console.log("Login 子組件 調用")
      return <button onClick={props.callFun}>Login</button>
    }
    function Logout(props) {
      console.log("Logout 子組件 調用")
      return <button onClick={props.callFun}>Logout</button>
    }


    //組件
    class App extends React.Component {

      // constructor(props) {
      //   console.log('初始化階段')

      //   //初始化 props
      //   super(props)
      //   //初始化 狀態
      //   this.state = {
      //     isLogin: false
      //   }
      // }

      // console.log('初始化階段')


      state = {
        isLogin: false
      }


      updateUser = () => {
        this.setState({
          isLogin: !this.state.isLogin
        })
      }

      render() {
        let isLogin = this.state.isLogin
        let button
        if (isLogin) {
          button = <Login callFun={this.updateUser} />
        } else {
          button = <Logout callFun={this.updateUser} />
        }
        return <div>
          <h1 > Hello HelloView </h1>
          {button}
          <button onClick={()=>{
            this.updateUser
            console.log("App 父組件調用")
          }}>數據更新</button>
        </div>

      }
    }
    ReactDOM.render(
      <App name="王鐵牛" age="23" goods="java" />,
      document.getElementById('app'));




  </script>
</body>

</html>

● 元素渲染

對於數據刷新只會修改有變化的地方，效率是比較高效的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心庫 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相關 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <div id="app1"></div>

  <script type="text/babel">

    function tick() {

      var time = new Date().toLocaleTimeString();

      var ele = <div>
        <h1 className='red' name='jack'></h1>
        <h2>今天是：{time}</h2>
      </div>


      ReactDOM.render(ele, document.getElementById('app1'));

    }


    setInterval(tick, 1000);
  </script>
</body>

</html>

● 組件和props介紹

基本語法：

React.createClass() 棄用

函數式組件（無狀態組件）

<script type="text/babel">

  //函數組件
  function Hello(props) {
    return <div>
      <h1 > Hello World </h1>
      <p>姓名：{props.name}</p>
      <p>年齡：{props.age}</p>
      <p>擅長：{props.goods}</p>
    </div>

  }

  ReactDOM.render(
    <Hello  name="王大錘" age="31" goods="java"/>,
    document.getElementById('app'));
</script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心庫 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相關 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <div id="app1"></div>

  <script type="text/babel">

    //函數組件
    function Hello(props) {
      return <div>
        <h1 > Hello World </h1>
        <p>姓名：{props.name}</p>
        <p>年齡：{props.age}</p>
        <p>擅長：{props.goods}</p>
      </div>

    }

    ReactDOM.render(
      <Hello name="王大錘" age="31" goods="java" />,
      document.getElementById('app'));

    //組件繼承
    class HelloView extends React.Component {
      render() {
        return <div>      
          <h1 > Hello HelloView </h1>
          <p>姓名：{this.props.name}</p>
          <p>年齡：{this.props.age}</p>
          <p>擅長：{this.props.goods}</p>
        </div>

      }
    }
    ReactDOM.render(
      <HelloView name="王鐵牛" age="23" goods="java" />,
      document.getElementById('app1'));

  </script>
</body>

</html>

● 列表渲染

也就是數據的循環

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心庫 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相關 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">


    //組件
    class List extends React.Component {

      state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        listTeacher:[
          {id:1,text:'Java'},
          {id:2,text:'JS'},
          {id:3,text:'Python'},
          {id:4,text:'PHP'},
          {id:5,text:'Node'},
        ]
      }


      updateUser = () => {
        this.setState({
          isLogin: !this.state.isLogin
        })
      }

      render() {

        let list = this.state.list;
        let listItem = []
        list.map((item) => {
          let ii = <li key={item}>{item}</li>
          listItem.push(ii)
        })

        this.state.listTeacher.map(item=>{
          let i = <li key = {item.text}>{item.text}</li>
          listItem.push(i)
        })

        return <div>
          <ul>{listItem}</ul>
        </div>

      }
    }
    ReactDOM.render(
      <List />,
      document.getElementById('app'));




  </script>
</body>

</html>

● 表單的應用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心庫 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相關 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">


    //組件
    class TodoList extends React.Component {

      state = {
        list: [],
        value: ''
      }

      onHandleAdd = () => {
        // let val = this.state.value;
        // let list = this.state.list;

        let {value, list} = this.state;
        list.push(value);
        this.setState({
          list:list
        })
        this.setState({
          value: ''
        })
      }
      onHandleChange = (event) => {
        this.setState({
          value: event.target.value
        })

      }

      render() {
        let val = this.state.value;
        let arry = this.state.list;
        let listItem = []
        arry.map((item,index) => {
          let li = <li key={index}>{item}</li>
          listItem.push(li)
        })



        return <div>
          <div>
            <input type="text" value={val} onChange={this.onHandleChange} />
            <button onClick={this.onHandleAdd}>添加</button>
          </div>
          <ul>{listItem}</ul>
        </div>

      }
    }
    ReactDOM.render(
      <TodoList />,
      document.getElementById('app'));




  </script>
</body>

</html>

React 基礎介紹 1 （語法介紹）

React 基礎介紹 1 （語法介紹）

知識點：

● React 項目的創建

● React 生命週期

● JSX語法介紹

● 事件處理

● 元素渲染

● 組件和props介紹

● 列表渲染

● 表單的應用

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

本地SSL證書過期輸入命令在IIS自動生成

.NET週刊【5月第2期 2024-05-12】

React 基礎介紹 2 （單應用頁面）

Lua 學習_5 元表

ASP.NET Core 性能對比評測（ASP.NET，Python，Java，NodeJS）

Lua 學習_3 函數及函數庫

Lua 學習_9 閉包

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結