React知识梳理

GitChat 发布于2019-08-23 17:14 / 774人阅读

摘要：只是一个语法糖，它可以将文件里的转换成所以对于方法使用要知道。组件的传递给内部组件，内部组件传递给内内部组件。没有解决什么问题如何构建大型项目没有解决，如何管理大型项目的数据状态没有解决。

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  React元素
     }
  }

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文件里的

转换成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里面

    
    
    function App(props){
        return {props.name}
    }
    
    class App extends React.Component {
        render() {
            return {this.props.name}
        }
    }

JSX语法是JavaScript语法糖，本质动态创建React组件，也是React.createElement新一层封装

const menu = {Item: function(){return 来吧} }

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

JSX语法本质和使用 组件的生命周期和方法 组件通信

React通信，也是单向数据传递的。组件的props传递给内部组件，内部组件传递给内内部组件。
使用Context的API进行跨层组件的通信，也挺繁琐，使用在根组件，但其它深层次嵌套的组件，都需要引入，所以这个Context适合多带带成为一个模块，被其它组件引用，降低复杂度。

React没有解决什么问题？

如何构建大型项目没有解决，如何管理大型项目的数据状态没有解决。

GPU云服务器云服务器梳理多云管理平台调研,流程梳理 react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104030.html

01.react入门必备，知识点梳理，生命周期全讲解

摘要：生命周期在版本中引入了机制。以后生命周期图解不包含官方不建议使用的事件处理事件的命名采用小驼峰式，而不是纯小写。只是在兄弟节点之间必须唯一受控组件使的成为唯一数据源。 react 基础 JSX JSX是一个 JavaScript 的语法扩展,可以很好地描述 UI 应该呈现出它应有交互的本质形式。 React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远...

Jiavan 2019-08-26 10:36 评论0 收藏0
前端开发收集 - 收藏集 - 掘金

摘要：责编现代化的方式开发一个图片上传工具前端掘金对于图片上传，大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前，在本人目前的研究中，只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景在没有ajax之前，前端与后台传数据都是靠表单传输，使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面，用...

ygyooo 2019-08-20 17:15 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
React知识地图--ES6

摘要：预计会有，实时更新目录。声明一个只读的常量，用来声明变量，和都是块级作用域。模板字符串模板字符串是增强版的字符串，用反引号标识。原文在我的博客：https://github.com/YutHelloWo...如果喜欢请start或者watch。这将是我继续写下去的动力。这里梳理下React技术栈需要的最小知识集，让你可以最短时间掌握React,Redux,React-Router,...

SillyMonkey 2019-08-20 18:28 评论0 收藏0
玩转 React（一）- 前言

摘要：本人计划编写一个针对中初级前端开发者学习的系列教程玩转。使用的原因是新的语言规范开发效率更高代码更优雅，尤其是基于开发的项目。其次也是目前特别流行的一个前端框架，截止目前，上有将近万，国内一二线互联网公司都有深度依赖开发的项目。本人计划编写一个针对中初级前端开发者学习 React 的系列教程 - 《玩转 React》。文章更新频率：每周 1 ~ 2 篇。目录玩转 React（...

waltr 2019-08-21 16:43 评论0 收藏0