react特點
- 用過ReactDOM.render(html,id)的方式渲染頁面;
- 其中html是html字符串润努,多個html節(jié)點可以用()包含,里面可以使用js變量痢畜,js變量需要用{}包起來鳍侣;id是掛載元素的實例,可以通過document.getElementById獲纫芯邸;
- 函數封裝(組件):
function Clock(props) {
return (<div>{props.date}</div>)
}
<Clock date={new Date()}> - 除了函數外我們還可以創(chuàng)建一個React.Component 的 ES6 類授账,該類封裝了要展示的元素惨驶,需要注意的是在 render() 方法中,需要使用 this.props 替換 props
JSX語法
- const element = <h1 className="class-name">Hello, world!</h1>;
- 推薦使用內聯樣式:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鳥教程</h1>,
document.getElementById('example')
); - JSX 允許在模板中插入數組棘捣,數組會自動展開所有成員:
var arr = [
<h1>菜鳥教程</h1>,
<h2>學的不僅是技術乍恐,更是夢想测砂!</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
組件:
- 可以使用命名函數function App(props)的方式構建組件,組件的變量用props.XXX顯示呜投;
- 也可使用class App extends React.Component方式定義組件如下:
組件的變量用this.props.XXX顯示,組件內自己實現render函數仑荐,return的內容即是組件內容。
class App extends React.Component {
render(){
return (
<div>
<h1 style={{textAlign: 'center'}}>{this.props.title}</h1>
<Desc content={"好好學習粘招,天天向上"}/>
</div>
);
}
}
狀態(tài)State
- 在constructor里定義state狀態(tài), 如this.state = {date, new Date()};
- 更新狀態(tài)使用setState洒扎,如this.setState('date', new Date());
- 通過調用 this.setState() ,React 知道狀態(tài)已經改變袍冷,并再次調用 render() 方法來確定屏幕上應當顯示什么
Props
- state 和 props 主要的區(qū)別在于 props 是不可變的,而 state 可以根據與用戶交互來改變邓线。這就是為什么有些容器組件需要定義 state 來更新和修改數據煌恢。 而子組件只能通過 props 來傳遞數據;
- 可以通過App.defaultProps的方式設置默認props;
- 我們可以在父組件中設置 state归薛, 并通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數中, 我們設置 name 和 site 來獲取父組件傳遞過來的數據习贫。
生命周期
- constructor:完成了React數據的初始化
- componentWillMount:在渲染前調用,在客戶端也在服務端千元。
- componentDidMount: 在第一次渲染后調用,只在客戶端祟身。之后組件已經生成了對應的DOM結構,可以通過this.getDOMNode()來進行訪問袜硫。 如果你想和其他JavaScript框架一起使用挡篓,可以在這個方法中調用setTimeout, setInterval或者發(fā)送AJAX請求等操作(防止異步操作阻塞UI)帚称。
- componentWillReceiveProps:在組件接收到一個新的 prop (更新后)時被調用闯睹。這個方法在初始化render時不會被調用担神。
- shouldComponentUpdate:返回一個布爾值。在組件接收到新的props或者state時被調用所刀。在初始化時或者使用forceUpdate時不被調用。
可以在你確認不需要更新組件時使用浮创。 - componentWillUpdate:在組件接收到新的props或者state但還沒有render時被調用砌函。在初始化時不會被調用。
- componentDidUpdate:在組件完成更新后立即調用垦沉。在初始化時不會被調用仍劈。
- componentWillUnmount:在組件從 DOM 中移除之前立刻被調用。
事件處理
- <button onClick={activateLasers}>激活按鈕</button>
- onClick={this.changeAge.bind(this)} 和 onClick={()=>this.changeAge()} 可以互換讹弯;
- 使用toggle = () => {}定義事件这溅,則可以直接使用{this.toggle}方式觸發(fā)事件;
- 推薦(event)=> this.toggle(event, 'a')方式調用函數悲靴;