基礎(chǔ)與組件

1.安裝腳手架 【CRA】

cnpm install -g create-react-app 

2.創(chuàng)建項(xiàng)目

create-react-app    projectname

3.啟動(dòng)項(xiàng)目

cnpm start           //啟動(dòng)
cnpm run build       //打包

4.項(xiàng)目目錄結(jié)構(gòu)

└── node_modules                    項(xiàng)目依賴目錄
├── public                              靜態(tài)公共目錄【不會(huì)被編譯壓縮打包，原樣輸出】
├── src                                   開發(fā)用的源代碼目錄
    - index.js              項(xiàng)目入口文件
    - index.css             項(xiàng)目全局樣式
    - App.js                項(xiàng)目最大的組件【類似根組件】
    - App.css               App組件的樣式文件
    - App.test.js           App組件測(cè)試文件 
    - logo.svg              初始項(xiàng)目的界面logo
    - serverWorker          內(nèi)部文件，我們不操作
├──.gitgnore                            項(xiàng)目git上傳忽略文件
├── package.json                    項(xiàng)目依賴配置記錄文件,記錄項(xiàng)目腳本命令
├── README.md                           使用方法的文檔
|-- config                項(xiàng)目webpack配置文件
|-- scripts               項(xiàng)目wepback腳本命令執(zhí)行文件
└── yarn-lock.json          鎖定安裝時(shí)的包的版本號(hào),保證團(tuán)隊(duì)依賴能一致

5. 入口文件【index.js】

import React from 'react'                           //JSX語(yǔ)法依賴
import ReactDOM from 'react-dom'            //React組件渲染到頁(yè)面上，是從react-dom中引入的
import App from './App';                            //引入根組件

ReactDOM.render(        //ReactDOM里render方法,把組件渲染成DOM樹，插入頁(yè)面元素中      
      <App/>,                                                       //組件名必須大寫
      document.getElementById('root')   //必須是DOM元素
    );

6.函數(shù)式組件【app.js根組件】

import React from 'react'                           //JSX語(yǔ)法依賴
import ReactDOM from 'react-dom'            //React組件渲染到頁(yè)面上，是從react-dom中引入的

const App = (props) => <h1>我的名字是{props.name}</h1>       

ReactDOM.render(                                            
    <App name="react" />                                
    document.getElementById('root')
)
export default App;     //導(dǎo)出組件

這樣一個(gè)完整的函數(shù)式組件就定義好了。但要注意！注意！注意！組件名必須大寫*，否則報(bào)錯(cuò)。

7.類組件【page/Home.js】

import React from 'react'                           //JSX語(yǔ)法依賴
import ReactDOM from 'react-dom'            //React組件渲染到頁(yè)面上，是從react-dom中引入的

class Home extends React.Component {
  render () {
    return (
      // 注意這里得用this.props.name, 必須用this.props
      <h1>歡迎進(jìn)入{this.props.name}的世界</h1>
    )
  }
}
ReactDOM.render(
  <Home name="react" />,
  document.getElementById('root')
)
export default Home;    //導(dǎo)出組件

功能復(fù)雜用類組件，功能單一用函數(shù)式組件

8.組件倆種樣式

1.行內(nèi)樣式
// 注意這里的兩個(gè)括號(hào)，第一個(gè)表示我們?cè)谝狫SX里插入JS了，第二個(gè)是對(duì)象的括號(hào)
<p style={{color:'red', fontSize:'14px'}}>Hello world</p>

2.安裝第三方插件
cnpm i styled-components -D

import style from 'styled-components'
const container = styled.div`
        background:red;
`       
<container>
    內(nèi)容
</container>

9.組件組合和嵌套【建議用嵌套】

- 組件的嵌套式指: 將子組件在父組件的jsx中以標(biāo)簽的形式使用
- 組件的組合是指：將一個(gè)組件寫在另一個(gè)組件的內(nèi)容中，然后在外層組件中通過(guò) this.props.children來(lái)接收內(nèi)容中的組件
- 但是我們推薦大家后面寫的話可以使用嵌套

10.組件的數(shù)據(jù)

【屬性props】

屬性props不會(huì)輕易改變
1.外部屬性
在根組件的標(biāo)簽中添加屬性，在組件自身就能接收到，在自身中使用{this.props.xxx}就能輸出，如果有多個(gè)屬性，這可以在開頭先解構(gòu)this.props
const props=this.props

2.內(nèi)部屬性
在自身組件內(nèi)部添加以下代碼
static defaultProps = {
    name: 'React'   //屬性名：‘屬性值’
  }
有多個(gè)屬性，也需要解構(gòu)this.props

屬性驗(yàn)證

$ cnpm i prop-types -S
//需安裝第三方插件
1.引入 import propTypes from 'prop-types'

組件名.propTypes={
  屬性名:PropTypes.驗(yàn)證類型【sting...】
}

【狀態(tài)state】

跟組件一樣，寫在類class函數(shù)中，區(qū)別于屬性是可以變動(dòng)，自己的狀態(tài)自己修改
state = {
    name: 'React',
  }
<h1>歡迎來(lái)到{this.state.name}的世界</h1>       使用方法也是先解構(gòu)在使用

方式二【官方推薦】
 constructor() {
    super()
    this.state = {
      name: 'React',
    }
  }

更改狀態(tài)

changeMsg=()=>{
this.setState({             
        msg:'新內(nèi)容'
})
}
//setState可以有兩個(gè)參數(shù)，參1是數(shù)據(jù)修改的參數(shù)，可是對(duì)象，也可以是回調(diào)函數(shù)，參2是異步回調(diào)函數(shù)
<button onclick={this.changeMsg}>更改狀態(tài)<button

11.狀態(tài)提升

果有多個(gè)組件共享一個(gè)數(shù)據(jù)，把這個(gè)數(shù)據(jù)放到共同的父級(jí)組件中來(lái)管理

12.受控組件與非受控組件

受控組件：父組件獲取數(shù)據(jù)傳參到子組件，子組件的數(shù)據(jù)都由父組件操控.

13.兩種事件的寫法

1.在組件內(nèi)使用箭頭函數(shù)定義一個(gè)方法(推薦)
2.直接在組件內(nèi)定義一個(gè)非箭頭函數(shù)的方法，然后在constructor里bind(this)(推薦)

14.事件傳參

在`render`里調(diào)用方法的地方外面包一層箭頭函數(shù)

15.表單用戶輸入

constructor(props){
  super(props)
  this.state={
     val:''                 
  }
}

changeVal=(e){
    const newval=e.taget.value
    this.setState({
        val:newval
    })
}

<input type="text" onkeyUp={this.changeVal}/> 

16.表單屬性問(wèn)題

Value->defaultValue    checked->defaultChecked

17.組件通信

1.父子組件通信
在父組件狀態(tài)state中定義數(shù)據(jù)，子組件通過(guò){...this.state}解構(gòu)接收

2.子父通信
父組件定義一個(gè)方法，子組件通過(guò){this.方法}接收
子組件定義數(shù)據(jù)，在自身中添加事件，將父組件方法外層包箭頭函數(shù)，并解構(gòu)后傳入子組件自身的參數(shù)

3.非子父通信
先子父，再父子，以父為中間站傳遞數(shù)據(jù)

4.跨組件通信【爺傳孫通信】
首先在public中創(chuàng)建上下文
import {createContext} from 'react'
const MoneyContext = createContext(100)  //100是默認(rèn)值
exprot default MoneyContext

在爺組件中引入創(chuàng)建的上下文組件
用
const money=this.state
<MoneyContext.provider value={money}>
    <Father></Father>
</MoneyContext.provider>

在孫組件中進(jìn)入上下文
static contextType = MoneyContext
<p>爺爺給了我{this.context}