mdn W3C標準網站

運行sass

cnpm i -D node-sass-chokidar npm-run-all

rem單位設置

<script>//rem單位設置document.documentElement.style.fontSize = (window.innerWidth)/750 * 100 + 'px'; </script>

mock數據

1.下載mockjscnpm i -D mockjs 2.引入mockjsvar Mock = require('mockjs'); var fs = require('fs'); 3.給出隨機數據 Mock.Random.extend({ title:()=>Mock.Random.pick([1,2,3,4,5,6,7,8,9]) }) 4.隨機數據結果 var data = Mock.mock({ 'arr|1-20':[{ 'id|+1':1, 'title':'@title' }] }) 5.寫入文件data.json fs.writeFile('./data.json',JSON.stringify(data),()=>{}) // 即出來相應的JSON數據

React 組件生命周期

1.組件的生命周期可分為三個狀態：1).Mounting: 已插入到真實DOM2).Updating:正在被重新渲染 3).Unmounting：已移出真實DOM 2.生命周期的方法有： 1)componentWillMount 在渲染前調用，在客戶端，也在服務端 2)componentDidMount:在第一次渲染后調用，只在客戶端 //之后組件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操作(防止異部操作阻塞UI)。 3)componentWillReceiveProps在組件接收到一個新的prop(更新后)時被調用。這個方法在初始化render時不會被調用。 4)shouldComponentUpdate 返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。 可以在你確認不需要更新組件時使用。 5)componentWillUpdate在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。 6)componentDidUpdate 在組件完成更新后立即調用。在初始化時不會被調用。 7)componentWillUnmount在組件從 DOM 中移除的時候立刻被調用。 8)ReactDOM.unmountComponentAtNode(document.getElementById('root')) // 組件初始化的時候 created constructor(props) { super(props) } // 組件掛載之前 beforeMount componentWillMount() { } // 組件掛載完成 mounted componentDidMount() { } // 組件將要接收新的props Vue沒有的 // 執行完成之后，this.props指向新的props // 唯一一個和props相關的生命周期 componentWillReceiveProps(nextProps) { // 舊的props this.props // 新的props nextProps } // 通過返回值判斷組件是否需要更新，用于React優化Vue沒有的 // true更新，false不更新 shouldComponentUpdate(nextProps, nextState) { // 舊的props this.props // 新的props nextProps // 舊的state this.state // 新的state nextState } // 組件將要更新 beforeUpdate componentWillUpdate(nextProps, nextState) { } // 組件更新完成 Updated componentDidUpdate(prevProps, prevState) { } // 組件將要卸載 componentWillUnmount() { }

卸載組件

1.掛載到Dom上時ReactDom.unMountComponentAtNode(節點) 2.掛載在一個節點上不渲染，等于null即可

組件

容器組件 有state數據管理 視圖組件 沒有state（class或函數） // 函數(props通過函數的參數接收)(props)=>{}

ReactDOM.render()渲染組件時返回的是組件實例；

而渲染dom元素時，返回是具體的dom節點

this.refs 和 ReactDOM.findDOMNode區別

this.refs 獲得的是虛擬DOM，而ReactDOM.findDOMNode 獲得的是實際DOM。1.ref添加到Compoennt上獲取的是Compoennt實例，添加到原生HTML上獲取的是DOM2.ReactDOM.findDOMNode，當參數是DOM，返回值就是該DOM；當參數是Component獲取的是該Component render方法中的DOM

refs vue中獲取ref this.$refs.input

react獲取ref this.refs.input.value<input type='text' ref='input'/>

生命周期階段

實例化時期 react組件在實例化時會依次調用如下組件方法：getDefaultProps getInitialState componentWillMount render componentDidMount存在期 當react組件被實例化后，用戶的一些操作會導致組件狀態的更新，此時如下方法將依次被調用：componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate銷毀時期 在組件銷毀的時候，會調用如下組件方法：componentWillUnmount

轉載于:https://www.cnblogs.com/2oex/p/9569178.html

總結

以上是生活随笔為你收集整理的React之mockjs+sass+生命周期函数的全部內容，希望文章能夠幫你解決所遇到的問題。

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