1.react 組件創建 首先要引入以下三個庫: react.min.js - React 的核心庫 react-dom.min.js - 提供與 DOM 相關的功能 babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 R ...
1.react 組件創建
首先要引入以下三個庫:
- react.min.js - React 的核心庫
- react-dom.min.js - 提供與 DOM 相關的功能
- babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包(package)一同使用可以讓源碼的語法渲染上升到一個全新的水平
react組件的創建有三種方式:
(1).
<script type="text/babel"> //類型必須為babel var Hello =React.createClass({ render:function(){ return <p>hello</p>; } }); ReactDOM.render( <Hello/>, document.getElementById('exp') ) </script>
首先創建react 組件類,在通過ReactDOM.render()將其渲染在id為exp的dom中
(2)使用函數定義了一個組件:
function New(props,refs){ console.log(props,refs) return <p>New</p>; } ReactDOM.render( <New class="q"/>, document.getElementById('example') );
(3)使用 ES6 class 來定義一個組件:
class New extends React.Component { render() { return (
<p>New</p> ) } ReactDOM.render( <New/>, document.getElementById('ex') )
2.react State(狀態)
React 把組件看成是一個狀態機(State Machines)。通過與用戶的交互,實現不同狀態,然後渲染 UI,讓用戶界面和數據保持一致。
React 里,只需更新組件的 state,然後根據新的 state 重新渲染用戶界面(不要操作 DOM)。
以下實例創建一個名稱擴展為 React.Component 的 ES6 類,在 render() 方法中使用 this.state 來修改當前的時間。
添加一個類構造函數來初始化狀態 this.state,類組件應始終使用 props 調用基礎構造函數。
class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()};//初始化state } render() { return ( <div> <h1>Hello, world!</h1> <h2>現在是 {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('example') );
3.refs 使用
class New extends React.Component { render() { return ( <div ref>//在組件的某個節點標簽上 添加 ref //即可在this.refs中看到該節點下的所有 節點,即數據 <p>1</p> <span>2</span> </div> ) } componentDidMount(){ console.log(this.refs.true.children[0].innerHTML)//通過refs獲取帶有 ref節點的 第一個子元素的內容 } } ReactDOM.render( <New/>, document.getElementById('ex') )