render

基礎用法

//1、建立虛擬DOM元素物件 
var vDom=<h1>hello wold!</h1>
//2、渲染 
ReactDOM.render(vDom,document.getElementById('box'))

react的API寫法

var ele=React.createElement('h2',{id:'box1'},"設定id")
ReactDOM.render(ele,document.getElementById(('jsx1')))

加入動態資料的渲染

const id="box2";
const name="adoctors";
const age=18;
//動態的資料加{變數}
var vDom2=<h1 id={id}>name:{name},age:{age}</h1>
ReactDOM.render(vDom2,document.getElementById(('jsx2')))
 

列表渲染

錯誤做法：

const arr=["jquery","zepto","vue","angular","react","nodejs","php"]
var vDom3=<ul>
    <li>{arr}</li>
</ul>
ReactDOM.render(vDom3,document.getElementById(('list')))   
//結果
 <ul>
     <li>jqueryzeptovueangularreactnodejsphp</li>
 </ul>

正確做法

var vDom3=<ul>
        {arr.map((item,i)=><li key={i}>{item}</li>)}
    </ul>
ReactDOM.render(vDom3,document.getElementById(('list')))

components

元件一般分為兩種：

第一種：工廠函式元件（也稱：簡單元件，即沒有狀態的元件）

//1、定義元件
function Myconponent(){
    return <h1>我是簡單元件</h1>
}
//2、渲染元件標籤
ReactDOM.render(<Myconponent />,document.getElementById(('com1')))
 

第二種：es6類元件（也稱：複雜元件）

//1、定義元件
class Myconponent2 extends React.Component{
    render(){
        console.log(this)  //Myconponent2例項物件
        return <h1>我是複雜元件</h1>
    }
}
//2、渲染元件標籤
ReactDOM.render(<Myconponent2 />,document.getElementById(('com2')))