学习React.js需要了解的一些概念

大家好，我是前端西瓜哥。React.js是一个广泛用于构建用户界面的JS库。让我介绍一些学习React需要了解的概念。声明式在React等框架流行之前，我们以命令式的方式更新UI：我们需要手动指定元素，然后命令它改变样式。//纯JS写法document.querySelector('#content')='前端西瓜哥';//JQuery写法$('#content').text('content');这种写法其实还是挺麻烦的。可能需要给元素添加id，添加class来区分，也可能需要找到当前元素的父元素定义区域，然后手动添加子元素，修改样式，移除等.凡事都要自己一一操作，很容易出错。React、Vue等框架的出现，使得命令式写法进入了实际项目开发的历史（只是偶尔还有一点点命令式写法还在使用）。React的编码是声明式的，你只需要维护状态，然后在需要的时候通知React，React会自动为你渲染UI。classCompoentextendsReact.Component{state={content:'FrontWatermelon'};updateContent=()=>{this.setState({content:'fe_watermelon'});};render(){return(

);}}//呈现为//React使用state对象保存可能发生变化的状态，然后用{variable}嵌入到HTML中，通过更新状态setState()方法，并重新呈现UI。UI=f(data)数据映射到UI的操作过程全部交给React，不用担心手写DOM更新出错。您所要做的就是更新状态并设置状态在HTML中呈现的位置。这种修改状态然后调用方法更新UI的方法其实挺像做一个小游戏的。比如我们要做一个俄罗斯方块，当一个动作发生的时候，我们需要更新每个像素的位置（updatedata），然后调用我们自己实现的render方法，先清空画布，然后再绘制一个一个（映射用户界面）。组件化什么是组件化？其实就是把模板、样式、脚本组合起来成为一个组件。我们一个一个的编写小的组件，然后将组件组合起来形成我们的UI界面。适当的抽象对于构建复杂的应用程序很重要。对于UI，更正确的思路是把UI分成各个部分。我们只需要关注一个具有特定职责的组件。完成后，将其与其他组件结合起来，构建稍微复杂一点的应用程序。例如，一个待办事项功能可以抽象如下。虚拟DOM为了高效更新DOM，React底层使用虚拟DOM来表示真实的DOM结构。没有使用真实的DOM，因为真实的DOM对象比较复杂，属性比较多，占用内存也比较大，所以抽象出一层虚拟DOM，也可以附加组件节点。当状态更新时，它会比较新旧虚拟DOM树得到补丁，并通过补丁更新真实的DOM树。React中新旧DOM对比算法进行了优化，比普通的树对比算法效率更高。这也是React能够应用到实际生产环境的重要原因。跨平台得益于React中虚拟DOM的实现，React支持通过ReactNative编译成其他平台语言来构建移动原生应用，比如Andorid或iOS原生应用。VirtualDOM实际上是对真实DOM的一层抽象。这种抽象与平台无关。因此，我们可以基于这一层抽象来实现跨平台的实现，让一套代码运行在不同的平台上。但是虚拟DOM无法覆盖一些不同平台特有的API，所以还是需要了解一些原生APP的知识，针对一些情况做一些特殊的处理。但至少React提供了一个跨平台的解决方案。JSXReact首先是一个JS库，它的语法逃不过JS的语法。在JS环境中，React通过React.crreatElement来描述DOM。要创建内容为this.state.content的div元素，我们需要这样写。constel=React.createElement('div',{},this.state.content);第一个是HTML元素名称或组件名称，第二个是属性，第三个是子元素或子组件。它只是描述了一个简单的DOM元素，但是我们的页面是由复杂的DOM元素组织的。如果我们使用上面的写法，代码容易出错，不方便维护。于是React推出了JSX，全称为JavaScriptSyntaxExtension，是对JS语法的扩展和增强。有了JSX，我们就可以实现“用JS写HTML”。constel=;但是JSX还是不能被浏览器识别，需要编译成JS。编译后，里面的会使用React.createElement('div')转换成代码。单向数据流React要求数据通过props从父组件流向子组件，这样可以更好地定位组件中某个数据的来源。当然，我们仍然可以额外传递一个可以修改父组件状态的方法给子组件，并用它来更新传递给子组件的数据。这启用了双向数据流，但它仍然是显式的并且仍然有助于理解程序的流程。ReactHooksReact支持通过类或函数来编写组件，分别称为类组件和函数组件。类组件可以创建对象，那么它们可以维护自己的状态是理所当然的。一般来说，函数组件是不支持state的，因为它是函数，只是接收外部传入的数据，然后渲染。没有办法维护里面的状态，因为它不是一个对象，而是一个用完就结束的函数。函数组件不能使用内部状态的情况在React推出ReactHooks后得到了解决。constCompoent=()=>{const[content,setContent]=useState('前端西瓜哥');return();};我们可以在函数组件中使用useState()来创建一个内部状态，并且可以通过setXxx()来更新它。第一次看到ReactHooks，我觉得它很神奇，太神奇了。底层实际上为每个状态保存了一个额外的有序列表，这个列表绑定到函数组件上。为了做到这一点，React要求Hooks必须每次都以相同的顺序执行。ReactHooks的优势之一是它将最小的逻辑单元从一个组件缩减为更细粒度的钩子组合。这使我们可以更灵活地编写组件。