創(chuàng)建組件
引入文件 提供 react reactdom對象 幫助瀏覽器解析jsx
組件名一定要大寫
let Component = React.createClass({
render(){
return ( jsx )
}
})
ReactDOM.render(組件名，要掛載的元素)
數(shù)據(jù)承載
state 組件內部的數(shù)據(jù) 可以盡心修改 getInitailState 生命周期初始化
props 來自于組件外部的數(shù)據(jù) 組件內部不能修改
用過getDefaultProps 進行初始化
外部傳遞和組件內部初始化同時存在以外部傳遞優(yōu)先
數(shù)據(jù)綁定
{} 存放變量表達式
- 基本數(shù)據(jù)類型 數(shù)字 字符串 基本用戶
- 對象 不能直接綁定
- 數(shù)組 數(shù)組的每一項都會被拆分出來
- 布爾值 null undefined 在頁面不會直接顯示 配置3元表達式或者其他的表達式
指令
react中不存在這種東西 我們自己去實現(xiàn)相同的效果
列表渲染
數(shù)組在綁定的時候會被拆解開來 通常結合map實現(xiàn)對數(shù)據(jù)的處理
條件渲染
a. 三元表達式控制渲染
b. || 或運算符控制渲染
c. 函數(shù)的返回控制渲染
屬性綁定
希望屬性的值是變量
《img src={變量或者表達式} 》
注意類名要用className
事件綁定 v-on:click
react事件和原生事件類似只需要把事件名寫成小駝峰就ok
原生
react
onClick={(e)=>{
事件處理代碼
}}
- 不帶參數(shù) 默認參數(shù)是事件對象 千萬別加()
onClick={this.fun} - 帶參數(shù) 通過bind實現(xiàn) 默認參數(shù)會放到最后方
onClick={this.fun.bind(null,4,6)}
數(shù)據(jù)變頁面變不變
react 中不像vue有數(shù)據(jù)響應式 要通過setState觸發(fā)頁面的修改
this.setState({要修改的數(shù)據(jù):修改的內容},cb)
setState 是一個異步方法參數(shù)一時要修改的數(shù)據(jù)
參數(shù)2是修改成功之后的回調
組件嵌套
react不想vue 全局和局部組件之分
組件的嵌套關系隨意 雖在外部誰是爸爸
插槽
和vue中組件標簽匯總存放的內容默認不會被渲染 react中沒有slot
組件對象下 props.children可以用來獲取組件標簽中的內容
ref
可以綁定dom 也可以綁定組件
通過組件對象下的 refs進行獲取
react組件通信
父子通信 props refs
子父通信 props
親兄弟通信 狀態(tài)提升
遠親通信 全局狀態(tài)管理 redux
組件的創(chuàng)建
createClass 方法
通過class關鍵字或者函數(shù)來創(chuàng)建組件
類組件函數(shù)組件
類組件 (功能組件，智能組件)
class關鍵字 創(chuàng)建的組件
有state值 能修改state值
能寫jsx
有生命周期
函數(shù)組件 (ui組件,木偶組件,傻瓜組件)
用函數(shù)創(chuàng)建的組件
沒有state 就不能修改數(shù)據(jù)
沒有生命周期
只能接收props 渲染界面
高階組件
受控組件 非受控組件
不是一種新的組件而是獲取表單數(shù)據(jù)中的方式
受控組件
非受控組件 通過ref 來獲取表單數(shù)據(jù)
react developer tool
谷歌瀏覽器插件 使用方式類似vue開發(fā)者工具
Fragment
可以作為跟組件使用并且不會被渲染
生命周期
創(chuàng)建和初始化
getDefaultProps 初始化porps
getInitialState 初始化state
15.6 的生命周期 在16版本取消 用構造函數(shù)代替
掛載
componentWillMount 掛載之前
componentDidMount 掛載結束
更新
componentWillReceiveProps props發(fā)生改變的時候觸發(fā)
shouldComponentUpdate 數(shù)據(jù)的改變是否應該引起頁面更新
componentWillUpdate 組件將要更新
componentDidUpdate 組件更新完畢
卸載銷毀
componentWillUnmount
react 腳手架工具
npm install create-react-app -g
create-react-app -V 查看版本號
create-react-app 項目名字 創(chuàng)建項目
注意:部分插件的版本依賴問題 需要打開package.json 里的scripts 下的eject
npm run eject
打開大禮包之前執(zhí)行一次本地git倉庫的提交
git status 查看當前狀態(tài)
git add .
git commit -m “hehe”
npm run eject 在項目目錄下執(zhí)行
npm start 跳轉的實例界面
基本命令
npm start 本地開發(fā)環(huán)境運行
npm run eject 解開插件包
npm run build 編譯打包
基本結構目錄
build 打包之后的文件目錄
config 項目的配置目錄
public 靜態(tài)資源目錄
script js啟動腳本
src 項目的源碼目錄
package 項目的配置依賴
.gitignore git 上傳的忽略文件
