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 查看當(dāng)前狀態(tài)
git add .
git commit -m “hehe”
npm run eject 在項目目錄下執(zhí)行
npm start 跳轉(zhuǎn)的實例界面
基本命令
npm start 本地開發(fā)環(huán)境運行
npm run eject 解開插件包
npm run build 編譯打包
基本結(jié)構(gòu)目錄
build 打包之后的文件目錄
config 項目的配置目錄
public 靜態(tài)資源目錄
script js啟動腳本
src 項目的源碼目錄
package 項目的配置依賴
.gitignore git 上傳的忽略文件
組件的創(chuàng)建
15 createClass 方法
16 通過class關(guān)鍵字或者函數(shù)來創(chuàng)建組件
類組件函數(shù)組件
類組件 (功能組件，智能組件)
class關(guān)鍵字 創(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
可以作為跟組件使用并且不會被渲染
生命周期
1、創(chuàng)建和初始化
getDefaultProps 初始化porps
getInitialState 初始化state
15.6 的生命周期 在16版本取消 用構(gòu)造函數(shù)代替
2、掛載
componentWillMount 掛載之前
componentDidMount 掛載結(jié)束
3、更新
componentWillReceiveProps props發(fā)生改變的時候觸發(fā)
shouldComponentUpdate 數(shù)據(jù)的改變是否應(yīng)該引起頁面更新
componentWillUpdate 組件將要更新
componentDidUpdate 組件更新完畢
4、卸載銷毀
componentWillUnmount
原文鏈接：https://blog.csdn.net/m0_46388605/article/details/104908390
