【一起来学React】- React基础知识补充（列表渲染、条件渲染、JSX语法）

本章节为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值不是唯一的，那么会非常影响diff比较的速度。

条件渲染

其实就是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