react学习--- 初识别react

Posted RunningAndRunning

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react学习--- 初识别react相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

react-native初体验 — 认识路由

结合基础与实战学习React.js 独立开发新闻头条平台

[译] 如何在React中写出更优秀的代码

原生React语法初体验

javascript 用于在节点#nodejs #javascript内设置react app的代码片段

React的初认识