美文网首页
React——(一)

React——(一)

作者: haha_writing | 来源:发表于2020-07-23 17:24 被阅读0次

SPA

        Single-Page Apps和传统的web app有很大的不同,它带来了更流畅的体验。创建一个SPA时,我们会碰到三个比较主要的问题:

1、在一个SPA中,你会花费大量的时间来保证你的UI和数据同步。

2、对DOM的操作非常缓慢。在SPA中,响应用户操作和显示新内容最常用的方法就是操作DOM。

3、使用HTML模版很痛苦。

React:A javaScript library for building user interface。

        React特性:

1、自动的UI状态管理:使用React,你只需要关心UI的最终状态。

2、闪电般的DOM操作:不直接操作DOM,而是修改内存中的virtual DOM。操作virtual DOM是非常迅速的,React会在适当的时候更新真实的DOM。它通过比较virtual DOM和real DOM的不同来实现更新,明确重要的更改,保证最少的更改次数。这个过程称为reconciliation。

3、创建了真正可组合UI的APIs。与编程中的其他东西一样,模块化,紧凑化和自包含是个好主意。React创建的用户界面都是基于组件的。

4、完全用Javascript定义的视觉效果。这主要是由于HMTL本身主要用于数据的显示,互动方面有较大的局限性。React允许你使用一种称为JSX的语句,语法与Javascript完全兼容,来指定视觉效果。

5、单向数据流:React中的数据流向是从父组件流向子组件。

        React中一个重要的函数:ReactDOM.render(),用于渲染虚拟DOM,返回ReactElement类型。包含两个参数:

        1、要输出的HTML对象,通常用JSX编写。

        2、该对象在DOM中要渲染的位置。

        render()方法中可以使用变量有条件的渲染要展示的页面。

JSX:JavaScript XML

        JSX是一种语言,让你很容易的混合JavaScript和HTML标签来定义UI元素和其功能。但由于浏览器所能显示的内容由HTML,JavaScript和CSS三种元素组成,所以,最终的结果还需要将其转化为浏览器所能识别的语言。所以,我们创建一个基于Node和编译工具的环境,在编译的时候,将所有的JSX自动转换为JS。早期,Facebook提供了一个简单的工具JSXTransformer,直接将JSXTransformer.jsw文件直接引入HTML文档就能使用,这个是浏览器端具有转译功能的脚本。后来用于服务器端渲染的是react-tools。React v0.14之后,使用Babel作为转译工具。

       Babel原名6to5,是一个开源的转译工具,将ES6,ES7,JSX等语法,转译为当下可执行的JavaScript版本。

       JSX中,组件名称都要大写开头。HTML标签采用小写。

React Component

        React Component是可重用的JavaScript块,它通过JSX,输出HTML元素。Component组件创建的一个原则是只完成一件事。props和state是React组件中两个很重要的概念。props是外来数据,类似于面向对象编程中传递给构造函数的参数;state是组件内部的数据,类似于面向对象编程中的私有属性。React Component在调用的时候可以有参数,作为属性。可以使用this.props获取属性。还可以通过this.props.children获取其子组件。Component的属性,一旦被设定,是不可更改的。

        React要求属性必须向下传递,从父组件到子组件,这意味着不能跨层去传递一个属性,子组件也不能向父组件传递属性。当有多个属性需要传递的时候,我们使用Spread操作符(...)。但是这个解决方案也不是完美的,由于任何属性的改变都会导致component的更新,使用这个方法可能会带来性能瓶颈。

       state是组件会改变的部分。当你调用setState并更新state对象中的某些内容时,组件的render()方法将被自动调用。

       React在内部使用标识符来标记每个元素。当动态的创建元素的时候,却不会自动设置标识符。我们需要完成这样的工作。在每个组件上,使用key来给每个组件设定唯一标识符。

        创建一个React Component:

        class HelloWorld extends React.Component {

               construtor(props){

                     this.state={

                             strikes:0

                    };

              }

             timerTick(){

                    this.setState({strikes:this.state.strikes + 100 });

             }

             componentDidMount(){

                    setInterval(this.timerTick,1000);

            }

             render(){

                return( <div className="mystyle"><h1>{this.state.strikes}</h1>  </div> )

                }

         }

React中有几个属性是HTML中没有的:

1、Key:可选的唯一标识符,一般用于列表。

2、refs:任何组件都可以附加这个属性,给属性可以是字符串或者回调函数。当refs是一个回调函数式,函数接收底层DOM元素或实例作为参数,这样就可以直接方位这个DOM或者组件的节点了。

3、dangerouslySetInnerHTML

相关文章

网友评论

      本文标题:React——(一)

      本文链接:https://www.haomeiwen.com/subject/yiyclktx.html