脚本宝典收集整理的这篇文章主要介绍了

React知识梳理

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

React解决了什么问题?

首先React是单页应用时期出现的框架,它适合开发单页应用,随之配套的构建工具webpack、node环境。

传统UI操作关注太多DOMAPI细节。
React帮助我们不必过多关注DOMAPI实现细节,React对DOM进行了更高级别的抽象。
使用React元素,描述我们的页面,细节的渲染,交给React去做。我们只需要告诉React,我写了什么组件,什么标签,什么事件就好了。

使我们开发页面,是组件化思想去开发,HTMLCSS、JS合为一体。比如我们创建一个标签,并给它样式和事件

  let div = document.createElement('div')
  div.style.color = "red"
  div.innerHTML = "HTML标签"
  div.onclick = function() {
    //描述这个标签做什么交互
  }

  class App extends Component {

     makeAction = () => {
     // div标签做的交互
     }
     
     render() {
         return <div style={{color:"red"}} onClick={this.makeAction}> React元素</div>
     }
  }

React是什么?
React是一个UI库,可以帮你描述页面标签该如何展示。
React以组件化的方式,写标签。所有的页面都可以拆分成一块块组件。

React的出现,让前端开发者可以不用过多关注DOM的API细节,我们只需要声明式的使用React写入我们想要的标签,React就会帮我们去渲染它。

如果建立一个React项目呢?首先去官网,需要Node的环境,加上Git的环境。都可以去官网下载。

第一步:使用npx create-react-app命令创建一个React项目
我知道使用JSX语法加上React.createElement、ReactDOM.render、React.Component,只需要两个API就可以把我们写的标签,浏览器便可以展示出来。

JSX只是一个语法糖,它可以将javaScript文件里的<div>转换成React.createElement('div')

所以对于React.createElement、ReactDOM.render方法使用要知道。


React.createElement(eleType, attribute, text)
ReactDOM.render(fn, string, class, node)

React.createElement(type,)创建和返回固定的元素。
React.render()方法,传入两个参数,第一个是对象,第二个是根节点
React.Component组块化方式开发页面里面的render方法
this.setState配合有状态组件更新整个DOM?
组件传入参数都在props里面