React總結之基礎(一)

時間 2019-12-05

標籤 react 總結基礎欄目 React 简体版

原文原文鏈接

中文官網html

英文官網前端

一. React是什麼?

用於構建用戶界面的JavaScript庫(框架)

二. React的特色有哪些?

聲明式編程
- 以聲明式編寫UI,可讓你的代碼更加可靠,且方便調試
組件化開發(高內聚,低耦合)
- 組件邏輯使用JavaScript編寫而非模板,所以能夠輕鬆的在應用中傳遞數據,並使得狀態與DOM分類
一次學習,隨處編寫
- 可使用Node進行服務端渲染
- 能夠作APP(ReactNative)

三. 基本使用步驟

下載引入相關js文件vue
- React核心文件 -->js/react.development.js
- React操做DOM文件 --> js/react-dom.development.js
- Babel運行時,負責把React代碼轉換成瀏覽器認識的代碼 -->js/babel.min.js
經過React實現前端效果react
- script標籤的類型必須爲<script type="text/babel">

<!--代碼以下-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
  <script src="js/babel.min.js"></script>
  <script type="text/babel">
    ReactDOM.render(<h1>hello world</h1>,document.getElementById('root'))
  </script>
</body>
</html>
複製代碼

四. JSX基礎語法

JSX是一個JavaScript的語法擴展(能夠在js代碼中直接寫標籤)
標籤能夠嵌套

<script type="text/babel">
    // let element = <div>Hello world!!!</div>
    let element = (    // ---> 這裏的()是可選的
      <div>
        <div>Hello</div>
        <div>world</div>
      </div>
    )
    ReactDOM.render(element,document.getElementById('root'))
  </script>
複製代碼

JSX標籤中的註釋 {/**/}

五. JSX中使用表達式

標籤中使用插值表達式:單的花括號(vue是雙花括號)

<script type="text/babel">
  // let element = <div>text</div>
  let info = {
    name: 'zs',
    age: 18
  }
  let element = (
    <div>
      <div>{info.name}</div>
      <div>{info.age}</div>
    </div>
  )
  ReactDOM.render(element,document.getElementById('root'))
</script>
複製代碼

插值表達式中支持基本的表達式計算

<div>{ 6 + 1 }</div>
複製代碼

表達式中支持函數調用(函數調用也是表達式)

<script type="text/babel">
    let foo = function () {
      return 'hello world!'
    }
    let element = (
      <div>
        <div>{ foo() }</div>
      </div>
    )
    ReactDOM.render(element,document.getElementById('root'))
</script>
複製代碼

標籤屬性中也支持表達式

// JSX中樣式類必須使用className屬性,不可使用class屬性
<script type="text/babel">
    let cn = 'active';
    let element = (
      <div>
        <div className={ cn }>測試屬性</div>
      </div>
    )
    ReactDOM.render(element,document.getElementById('root'))
</script>
複製代碼

JSX自己也是一個表達式編程

能夠賦值給變量

let element = <div>JSX表達式</div>
複製代碼

能夠做爲函數的返回值

let foo = function () {
    return <div>hello world!</div>
}
複製代碼

能夠做爲函數的參數

let foo = function (param) {
    return <div>{param}</div>
}
let element = (
    <div>
        <div>{ foo(<div>參數</div>) }</div>
    </div>
)
ReactDOM.render(element,document.getElementById('root'))
複製代碼

六. JSX條件渲染

js分支結構

<script type="text/babel">
    function showInfo(flag) {
        if (flag) {
            return <div>hello</div>
        } else {
            return <div>world</div>
        }
    }
    let element = <div>showInfo(false)</div>
    ReactDOM.render(element,document.getElementById('root'))
</script>
複製代碼

元素變量

let data = <div>hello</div>
if (true) {
    data = <div>world</div>
}
複製代碼

與運算符&&

// &&前面的條件成立,就顯示後面的內容,不然不顯示
let flag = true;
let addData = <div>{flag && <div>hello</div>}</div>
複製代碼

三目運算符

let flag = false;
let msg = <div>{ flag ? <div>hello</div> : <div>world</div>}</div>
複製代碼

阻止渲染:經過return null終止函數返回JSX內容

function foo(flag) {
    if(flag) {
        //若是這裏執行,那麼久終止後續代碼的執行,最終不會進行渲染
        return null;
    }
    return <div>阻止渲染</div>;
}
複製代碼

七. JSX列表渲染

使用數組map方法對列表中的數據進行加工,造成一個新的數組,而後放到插值表達式中.

let data = ['公孫離','橘右京','孫尚香','娜可露露'];
let nz = data.map((item,i) => {
  return <div key={i}><span>{item}</span></div>
});
let element = (
  <div>{nz}</div>
);
ReactDOM.render(element,document.getElementById('root'));
複製代碼

key的做用:數組
- 列表的同級添加key屬性,要確保key的惟一性

八. JSX的底層原理

JSX本質上是經過下面的方式建立元素的,JSX元素的本質是對象 React.createElement(element, [props], [...children])
- 參數1:表示標籤的名稱
- 參數2:表示標籤的屬性列表
- 參數3:表示子元素內容

let element = (
    <h2 className = "active">
        Hello world!
    </h2>
);
// 上面的代碼能夠用如下形式表示:
let element = React.createElement(
    'h2',
    {className: 'active'},
    'Hello world'
);
複製代碼

九. 樣式操做

class樣式

let element = <div className='active'>Hello</div>
複製代碼

style樣式:不可使用字符串形式

let style = {
    color: 'pink',
    backgroundColor: '#ccc'
}
let element = <div style = {style}>Hello</div>
複製代碼

十. 組件

使用函數建立組件瀏覽器
- 函數首字母大寫
- 函數返回值爲JSX
- 組件模板必須有惟一的根元素
```
function Welcome() {
    return <div>Hello world</div>
}
複製代碼
```
函數父組件向子組件傳值bash
- 經過函數的參數傳值
- 子組件經過參數獲取到的props,值不容許修改(單向數據流,只能從父組件向子組件傳遞)
```
// 父組件內容
let m = 10;
<Child num = {n} uname='jack'/>
// 子組件
function Child(props) {
    return <div>Hello {props.uname}</div>
}
複製代碼
```
類的繼承babel
- 經過extends關鍵字實現繼承
```
class Student extends Person {}
複製代碼
```
- ES6中,在子類的constructor中必須先調用super才能引用this
- 若是沒有定義構造函數,會默認生成一個,攜帶所有參數
```
// 默認構造函數
constructor (...props) {
    super (...props);
}
複製代碼
```

使用類建立組件框架

須要繼承React.Component
須要提供render方法,用於渲染模板

class Welcome extends React.Component {
    render() {
        return (
            <div><h1>類組件</h1></div>
        )
    }
}
複製代碼

父組件向子類組件傳值
- 父組件經過props向子組件傳值
- 父組件經過屬性的方式向子組件傳值
組件的內部狀態state
- 組件的內部狀態保存在state中,state位於構造函數中
- 類組件應該始終使用props參數來調用父類的構造函數
- 經過setState進行狀態更新
- render方法中不容許修改state

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。