本章節為react基礎知識的補充，我今天看了一下，發現react的基礎知識大致能通過我之前的幾張來講解的差不多了，但是不夠細，還有一些，只講了一個概念，所以這一章節來進行一個補充吧！

列表渲染

react的列表渲染不和vue或者ng一樣，有指令的，react完全靠jsx和js函式來完成渲染的

<div className="article">
      {this.props.list.map((item, index) => {
        return <List article={item}
		key={index} index=
 
{index}
		deleteItem={this.handleListDelete.bind(this)}
                />
       })
 }
</div>

通過map函式來對props或者state進行迭代，然後react會自動幫你解析虛擬DOM，形成DOM。
說到列表不得不說key，這個非常關鍵，react中必須指定key（例如在vue中採用的是舊地複用原則，如果你不指定key尤其在input中會出現bug，如果你是一個簡單的資料列表，可以使用index）key是給react用，不是給開發人員用的，最重要的就是在diff演算法比較新舊DOM的時候，如果你的key

條件渲染

其實就是if...else語句，以下示例是一個有條件的列表渲染

function Fakin(props) {
    {this.props.arr.map((item, index) => {
	 return <h1>Fakin{item}</h1>;
       />
    })
}

function CuteFakin(props) {
  return <h1>CuteFakin</h1>;
}

function showFakin(props) {
 

  const isFakin = props.isFakin;
  const arr=[1,2,3,4]
  if (isFakin) {
    return <Fakin arr={...arr} />;
  }
  return <CuteFakin />;
}

//app.js
ReactDOM.render(
//你可以嘗試把isFakin變成false
  <showFakin isFakin={true} />,
  document.getElementById('root')
);

JSX語法

本質上，JSX只為React.createElement(component, props, ...children)函式提供語法糖。

<div color="red">
  Fakin
</div>

這段jsx會編譯成：

React.createElement(
  'div',
  {color: 'blue'},
  'Fakin'
)

其實就把虛擬DOM傳遞給React.createElement函式。

小技巧

不會ES6咋整

答：你可以用ES5

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

使用create-react-clas模組

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

不想用jsx怎麼辦

答：可以看上面使用React.createElement函式建立

文章到此就結束了，React的基礎知識基本說的差不多了
以下是我之前幾篇對React基礎知識的文章
https://www.fakin.cn/2164.html
https://www.fakin.cn/2182.html
https://www.fakin.cn/2190.html
https://www.fakin.cn/2466.html