一文讲解React的基本用法和技术特点

开课吧开课吧锤锤2021-07-12 15:25

React是一个开源程序库。由Facebook所倡导的社区来维护。  

React的基本用法和技术特点

1、基本用法  

它的基本用法如下:  

<div id="myReactApp"></div>

 

<script type="text/babel">

  function Greeter(props) {

    return <h1>{props.greeting}</h1>

  }

  var App = <Greeter greeting="Hello World!" />;

  ReactDOM.render(App, document.getElementById('myReactApp'));
</script>

上面的代码在浏览器中显示会换算成如下内容:  

<div id="myReactApp">

  <h1>Hello World!</h1>

</div>

现在来说一下React的重要特性。  

2、以组件为单位  

第1个特性就是以组件为单位。  

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

组件的使用大大降低了项目开发的复杂度,这些组件可以传递参数值。从而大大提高了组件使用的灵活性。  

目前react支持两种组件形式。一种是函数体组件,一种是类组件。  

2.1函数体组件  

函数体组件就是通过一个函数返回一些jsx,也就是JavaScript和html的混合体。  

函数组件是无状态的。  

const Greeting = (props) => <div>Hello, {props.name}!</div>;

2.2类组件  

类组件是基于es6的类来创建有状态的组件。之所以称之为有状态,是因为他们的state要存储传递这些组件的值。  

class ParentComponent extends React.Component {

    state = { color: 'green' };

    render() {

      return (

        <ChildComponent color={this.state.color} />

      );

    }

  }

3、虚拟DOM  

另一个特性是虚拟DOM,也就是文档对象模型。React使用内存中的数据结构缓存来计算数据的差别,从而提高显示DOM的效率和性能。  

有了这种技术以后我们在更新网页的时候不需要每次都更新整个页面,而只需要更新那些变化的部分就可以了。  

4、JSX  

再一个特性是jsx又称之为JavaScriptXML,它是JavaScript和html的一个混合体。这个特性有的人喜欢,有的人讨厌。  

class App extends React.Component {

    render() {

      return (

        <div>

          <p>Header</p>

          <p>Content</p>

          <p>Footer</p>

        </div>

      );

    }

  }

5、条件声明  

再一个特性是条件声明,尽管在jsx中不能使用,ifelse语句,但是有条件表达式这种语法。  

class App extends React.Component {

    render() {

      const i = 1;

      return (

        <div>

          <h1>{ i === 1 ? 'true' : 'false' }</h1>

        </div>

      );

    }

  }
class App extends React.Component {

    render() {

      const sections = [1, 2, 3];

      return (

        <div>

          {sections.length > 0 && sections.map(n => (

              <div key={"section-" + n}>Section {n}</div>

          ))}

        </div>

      );

    }

  }

6、Reacthooks  

Reacthooks的引入。  

在类组件中我们有生命周期函数来处理组建的不同状态,比如shouldComponentUpdate,componentDidMount,componentWillUnmount,render。在函数组件当中是通过Hooks来监控生命周期状态的。内置的Hooks有useState,useContext,useReducer,useEffect等。  

Hooks使用需要遵循如下两个原则:  

1.只能在顶层代码中调用,不能在循环中或者条件判断当中调用。  

2.只能在函数组件中使用,不能在常规函数和类组件中使用。  

7、React的数据管理  

接下来说一下React的数据管理。  

React是使用flux架构来管理数据的。它的基本理念是属性向下流,动作向上流。不能够直接的修改属性值,而需要通过动作的发放,在动作触发的回调函数中对数据进行修改。  

在众多react的数据管理模式当中,redux是最著名的一个。它的特点是使用单一的数据仓库。  

以上就是开课吧广场小编为大家整理发布的“一文讲解React的基本用法和技术特点”一文,更多Web教程相关内容尽在开课吧广场Web教程频道。 

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营