React基础知识补充

本章节为react基础知识的补充,(列表渲染、条件渲染、JSX语法),我今天看了一下,发现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(react-router、rredux、immtable、以及react进阶知识和新特效hooks等等)

一起来学React-基础知识

一起来学React-生命周期

一起来学React-事件处理

React父子组件通信