首页 > 其他 > 详细

react学习--- 初识别react

时间:2017-09-20 22:37:27      阅读:256      评论:0      收藏:0      [点我收藏+]

React是Facebook推出的一个JavaScript库

一、react三大特性

1、组件

基于react的项目一切都基于组件,各个组件有各自的状态,状态变更时,会自动重新渲染组件。组件特性也是Web前端发展的趋势。

一个Hello.jsx组件

// Hello.jsx
import React from react;
export default Class Helloextends React.Component {
    render() {
        return (
          <div  className="Hello-component">
            <h2>Hi, I am {this.props.name}</h2>
          </div>
        )
    }
}

其他组件中,可以像HTML标签一样引用它:

import Hello from ./hello;

export default function(props) {
    return (
      <Hello name="world"/>
    )
}

 

2、jsx

上面的render方法中,有一种直接把HTML嵌套在JS中的写法,被称作JSX。这种语法结合了JavaScript和HTML的优点,即可以像平常一样使用HTML,也可以在里面嵌套JavaScript语法,运行时,Babel等工具会将JSX编译成JavaScript语法。

3、virtual DOM

React的设计中,开发者基本上无需操纵实际的DOM节点,每个React组件都是用Virtual DOM渲染的,可以看成是一种用JavaScript实现的内存DOM抽象。React在Virtual DOM上实现了一个Diff算法,渲染组件时,会高效的找出变更的节点,刷新到实际DOM上。

二、组件的prop和state

prop:组件对外的接口(使用组件的时候需要传入的数据父组件到子组件之间的通信)子组件通过this.props.name使用

state:组件内部状态 

react是单项数据流,那么子组件到父组件之间是如何通信的呢?通过callback

同级组件之间是如何通信的呢?

同级组件之间的通信还是需要通过父组件作为中介,或者使用redux或flux

 

react学习--- 初识别react

原文:http://www.cnblogs.com/running1/p/7565399.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!