React学问梳理

React处理了什么问题?

起首React是单页运用时代涌现的框架,它合适开辟单页运用,随之配套的构建东西webpack、node环境。

传统UI操纵关注太多DOM的API细节。
React协助我们没必要过量关注DOM的API完成细节,React对DOM举行了更高级别的笼统。
运用React元素,形貌我们的页面,细节的衬着,交给React去做。我们只须要通知React,我写了什么组件,什么标签,什么事宜就好了。

使我们开辟页面,是组件化思想去开辟,HTML、CSS、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内里

    <App name="rong" />
    
    function App(props){
        return <div>{props.name}</div>
    }
    
    class App extends React.Component {
        render() {
            return <div>{this.props.name}</div>
        }
    }

JSX语法是JavaScript语法糖,实质动态竖立React组件,也是React.createElement新一层封装

const menu = {Item: function(){return <div>来吧</div>} }

//JSX语法
ReactDOM.render(<menu.Item />)
//JavaScript原生语法
ReactDOM.render(React.createElement(menu.Item))

JSX语法实质和运用

组件的生命周期和要领

组件通讯

React通讯,也是单向数据通报的。组件的props通报给内部组件,内部组件通报给内内部组件。
运用Context的API举行跨层组件的通讯,也挺烦琐,运用<context.Provider>在根组件,但别的深层次嵌套的组件,都须要引入<context.Consumer>,所以这个Context合适零丁成为一个模块,被别的组件援用,下降复杂度。

React没有处理什么问题?

怎样构建大型项目没有处理,怎样治理大型项目的数据状况没有处理。

    原文作者:xiyou
    原文地址: https://segmentfault.com/a/1190000019042501
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞