React入門到組件的三大核心-有解無憂

React簡介

官網

1.英文官網: https://reactjs.org/
2.中文官網: https://react.docschina.org/

介紹描述

1.用于動態構建用戶界面的 JavaScript 庫(只關注于視圖)
2.由Facebook開源

React的特點

1.宣告式編碼
2.組件化編碼
3.React Native 撰寫原生應用
4.高效（優秀的Diffing演算法）

React高效的原因

1.使用虛擬(virtual)DOM, 不總是直接操作頁面真實DOM，
2.DOM Diffing演算法, 最小化頁面重繪，

使用的方式

一 CDN 鏈接
在html內引入

<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>
// 配合jsx使用
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

二下載到本地引入
復制紅色框內的連接在url地址欄打開全部復制到子自己創建的js檔案內引入即可使用
在這里插入圖片描述
三腳手架自帶

jsx

1 定義虛擬DOM 不要使用引號
2 標簽中混入運算式時要用 {}
3 樣式的類名要用 className 不要用 class
4 行內樣式要用 style={{color:‘red’}} 格式去寫
5 只有一個根標簽
6 標簽必須閉合
我們可以在 JSX 中使用 JavaScript 運算式，運算式寫在花括號 {} 中
7 標簽首字母
1) 諾小寫字母開頭,則將該標簽轉為html中同名元素,諾html中無該標簽對應同名元素,則去找組件是否有同名組件,無報錯
2) 諾大寫字母開頭,react就去渲染對應的組件,諾組件沒有定義,則報錯
在 JSX 中不能使用 if else 陳述句，但可以使用 conditional (三元運算) 運算式來替代
JSX 允許在模板中插入陣列，陣列會自動展開所有成員

類式組件

  class B extends React.Component {
                render(){
                    return <h1>我是類式組件</h1>
                }
            }                                                                   ReactDOM.render(<B />,document.getElementById('app'))

類中直接可以寫賦值陳述句
在這里插入圖片描述

 class a {
    constructor(num){
      this.num = num
    }
      a = 1
    }
   let b =  new a(1)
  console.log(b)

簡單組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class Person extends React.Component {
          render(){
              // render 函式內有this實體化物件可以拿到props傳遞的值
            let  {name} = this.props
              return <h1>{name}</h1>
          }
      }
     
      ReactDOM.render(<Person name="張三" />,document.getElementById('app'))
    </script>
</body>
</html>

有狀態組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        .unactive{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
     class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

    </script>
</body>
</html>

組件內三大核心

1 state
state 是組件物件最重要的一個屬性,值是一個物件可以包含多個key-value的組合
組件被稱為一個’狀態機’,通過更新組件的state來更新對應的頁面顯示(重新渲染組件)
1)組件render方法種的this為組件實體物件
強烈注意
2)組件自定義的方法中this為undefined 如何解決? 一在構造器中改變this指向通過函式物件的bind() 二箭頭函式必須寫出賦值陳述句箭頭函式那種特性三狀態資料,不能直接修改或更新借助于 setState({})來更新
2 props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
        .unactive{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        class Person extends React.Component {
      
          render(){
              // render 函式內有this實體化物件可以拿到props傳遞的值
            let  {name} = this.props
              return <h1>{name}</h1>
          }
      }
      ReactDOM.render(<Person name="張三" />,document.getElementById('app'))
    </script>
</body>
</html>

對props進行限制標簽屬性型別默認值限制
1)引入 prop-types

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
    class Person extends React.Component {
        
          render(){
              // render 函式內有this實體化物件可以拿到props傳遞的值
            let  {name} = this.props
              return <h1>{name}</h1>
          }
      }
      Person.propTypes = { name:PropTypes.string.isRequired         sex:PropTypes..string           函式 : func }   //沒簡寫必須在類外定義
      ReactDOM.render(<Person name="張三" />,document.getElementById('app'))
    </script>
</body>
</html>

添加默認值

Person.defaultProps = { sex:'男'}

簡寫

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
     class Person extends React.Component {
        static propTypes = { name:PropTypes.string.isRequired    // 簡寫到了類內部      sex:PropTypes..string           函式 : func }
          render(){
              // render 函式內有this實體化物件可以拿到props傳遞的值
            let  {name} = this.props
              return <h1>{name}</h1>
          }
      }
     
      ReactDOM.render(<Person name="張三" />,document.getElementById('app'))
</body>
</html>

ref
1.字串形式的ref

2.回呼形式的ref

3.createRef創建ref容器· (該容器是專人專用只能存一個DOM節點)

在這里插入圖片描述

總結

因為之前有學習過vue所以感覺上手蠻快的,jsx語法也非常好用,也發現了很多與vue的不同之處,如,vvue的模板和資料是分開的 react是將模板和資料都以類的形式寫在了一起,類式組件.牛

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290675.html

標籤：其他

上一篇：前端開發需要學習什么

下一篇：JavaScript資料結構之雙向鏈表，C語言也適用！