react的写法

321 阅读3分钟

类组件的写法

首选介绍以下类组件的写法,直接上代码:

class App extends React.Component{
  render() {
  	constructor(props) {
    	super(props);
  	}
    return (
        <div>
          
        </div>
    )
  }
}

对于上述的代码,constructor可以不写,但是如果写了,就必须写上props,而且还得将props传给super,不然在constructor中将的不到props的值

上面的代码中,render必须写上,而在render中必须写上return,return的返回值只能传一个根元素,所以对应如果有两个以上元素,可以用<div></div>或者<></>包裹。
render用于将生产的虚拟DOM进行渲染,从而得到一个真实的dom。 于是当最后代码完成后,需要ReactDOM.render()将生成的dom进行整合,并且渲染到页面上。

函数组件的写法

直接上代码

function App(){
  return (
      <div>show</div>
  )
}

非常简单,只需要写一个函数,然后return一个返回值就可以了

diff算法

对于render生成的代码,其实并不是直接渲染到页面上,而是会先生成虚拟dom,此时用生成的虚拟dom和之前生成的虚拟dom进行比较,这种比较的方法叫做diff算法。此时两个虚拟dom发生变化的地方会用新的变化进行替换,重新进行渲染,但是对于没有发生变化的地方,则不进行渲染,这大大提升了react的性能

JSX

对于原生的react代码,每次创建元素很麻烦,所以我们提出了用jsx语法代替,此时代码中return的<div></div>就是一种jsx语法。jsx语法需要注意的点在于:
1.对于style元素,在jsx中书写的时候需要加上{{}}两层括号,而且对于类名,应该写成className
2.对于jsx中的标签内如果需要传值,主要要使用{}包裹,如果使用"",则默认会传一个string的值,容易造成错误
3.对于传入的对象,我们需要用{{key:value}}包裹,此时第一层是用来表示这里面是js代码,第二层用来表示这个是个对象
jsx其实就是一种语法模板,他用来翻译react中书写的代码,而用来将jsx语法翻译的工具叫做babel-loader,而babel-loader被webpack内置了,因为我们用的脚手架其实就是webpack的打包,所以默认我们就可以写jsx语法而不报错。

条件判断

在react中,也可以像vue一样书写条件判断语句,但是注意,在react中,{}中的任何值,必须是一个确定的值,可以是函数的返回值,但是不能是一个函数或者一个条件判断,赋值语句 比如:{a=1}这样的就是非法的
在react中,条件判断语句一般可以用三元判断符写,而for循环可以用函数的一对方法,诸如map,reduce,filter等等,很多时候,非常方便