react是什么

用于動態構建用戶界面的javaScript庫 （只關注視圖）

react是誰開發的

由Facebook開發，且開源。

react的優點

1、高效，使用虛擬DOM+優秀的Diff算法，盡量減少與真實DOM的交互
2、組件化開發
3、聲明式編碼
3、在React Native中可以使用React語法進行移動端開發

react如何將虛擬DOM渲染到頁面

ReactDOM.render(被渲染的虛擬DOM,document獲取的根節點)

創建組件的兩種方式

函數組件

function View() {return (// 語法上必須要有根元素包裹// 可以用es6語法<div ><h1>這是一個函數組件</h1></div>); }

類組件

import React, { Component } from 'react';class View extends Component{render() {return (<div>這是一個text類組件</div>)} }

組件傳參

父傳子

場景一：

傳遞變量
父組件中直接綁定變量
語法：
傳遞單個 <Son data={obj}/>
傳遞多個 <Son data={obj}{...obj2}/> or <Son data1={obj1} data2={obj2}></Son>
子組件this.props.data接收
data 是自定義的屬性名

為什么傳的第二個對象不解構會報錯？
因為第一個對象會有data作為屬性名，而第二個對象不解構就沒有屬性名
【注意】：擴展運算符是不可以直接在對象上使用，這是是因為有react環境的支持

場景二：

傳遞內容
組件極少部分不同時使用
父組件中雙標簽包裹內容
語法： <Son><a>我是父組件傳來的內容<a></Son>
子組件用this.props.children接收

一般用雙標簽，也就是為了這樣傳遞參數

場景三：

傳遞組件
大多用于子組件大部分相同，少數不同時使用
父組件綁定組件名稱
語法：<Parent left={ <Son1> }> <Parent left={ <Son2> }>
子組件this.props.left接收
left 是自定義的屬性名

簡化寫法

那我們都知道雙標簽里的內容可以用this.props.children接收
下邊是一種更簡單的寫法
<Son children="內容" />
<div {...this.props} >
這兩個有同樣的效果，這樣你可能看不出簡便在哪里，看例子

當我們復用一個組件時，往往會接收多個參數，className…… 、activeClassName、children

• 正常的寫法(看上去已經夠簡便了吧)
  <Son className="" activeClassName="" …… >內容</Son>
  <div {...this.props}>{this.porps.children}</div>

• 單標簽接收children（這樣用是不是就更加簡便了呢）
  <Son className="" activeClassName="" children="內容" />
  <div {...this.props}></div>

混合使用

this.renderProps

實現過程
有A、B、C
A和B確定是父子關系
A組件中寫入<A render={(name)=><C name = {name} /> }/>
B 中this.props.render(name)
此時C組件就成了B組件的子組件，可以接收到屬性為name的參數

說這樣是在B組件中預留了一個類似插槽的作用
可以拿到B組件的數據
修改時直接在A組件中修改（）

子傳父

通過函數的回調方式
父組件通過子組件的標簽傳遞函數，子組件調用函數即可
語法<Son callback={fn}></Son>
子組件通過this.props.fn() 執行函數

react的文件目錄

1、pubilc

- index.html- favicon.ico- manifest.json移動App的配置文件,用于指定應用的顯示名稱、圖標、入口頁面等信息.

2、src

- components- alertindex.jsx- footerindex.jsx- navindex.jsx比如：導航、彈出層、loading加載動畫、分頁器等 - images凡事頁面中<img src>標簽使用的圖片 - js頁面中編寫的js功能及開發文件 - storereduxmobxcontext - stylesimg/css、less、scss - unitjs一些組件比如，如果不用jq,自己封裝一些js 的方法如果手機端有活動頁面都需要下載app,同的app 的判斷如果有彈出去js等 - viewshomeindex.jsxaboutindex.jsxjoinedindex.jsxlist.jsxother.jsx - other

總結

以上是生活随笔為你收集整理的react知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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