React 学习笔记

一、React

React是由facebook开源的前端组件化框架，虽然当前对React的评论各式各样，但是就React专注的点来说（前端功能分解化，使得前端开发像搭积木一样快速并且易维护），还是得到了很多公司的青睐。

1、React的特点：

  • (1) React可以只作为视图在MVC中使用，这样可以很容易使用React在已有项目的基础之上进行开发

  • (2) 虚拟DOM：这个是React的一个亮点，同时也是React高性能的核心。使用虚拟DOM可以将原本的HTML页面DOM更新的操作转移到内存中。通过在内存中的高效率计算，计算出最小的需要更新的DOM视图再进行更新，以完成整个组件的渲染。

  • (3)数据流：React使用单向数据流，相对于传统的数据绑定而言更加快捷，灵活。

2、React的HelloWorld
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloWorld= React.createClass({
          render: function() {
            return (
              <div>
                Hello, world!
              </div>
            );
          }
        });
        ReactDOM.render(
          <HelloWorld/>,
          document.getElementById('example')
        );
    </script>
  </body>
</html>

上面的代码中，首先定义了一个HelloWorld的React组件，组件返回一个div，div中写了Hello, world!字符串。然后通过ReactDOM.render方法将HelloWorld组件渲染到body中Id为“example”的div中。

2、props属性传递
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloWorld= React.createClass({
          render: function() {
            return (
              <div>
                Hello, world, {this.props.name}!
              </div>
            );
          }
        });
        ReactDOM.render(
          <HelloWorld name="Jason"/>,
          document.getElementById('example')
        );
    </script>
  </body>
</html>

上述代码与helloworld的代码几乎一样，唯一的区别是在Hello, world后面添加了一个名称，而这个名称是在ReactDOM.render渲染的时候通过name属性传进来的，所有在标签中出现的属性（如上面的name）都被赋值给了React组件内部的props对象。

  • props用来向React组件传递属性，一般来说属性是组件天生的东西，在组件内部是不可以更改的。
3、state状态更新
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloWorld= React.createClass({
          getInitialState : function(){
              return {
                  number: 0
              }
          },
          render: function() {
            return (
              <div>
                Hello, world! Number : {this.state.number}!
              </div>
            );
          },
          handleNumberAdd : function(){
             this.setState({number : this.state.number + 1});  
          },
          componentDidMount : function(){
              setInterval(this.handleNumberAdd, 1000);
          }
        });
        ReactDOM.render(
          <HelloWorld name="Jason"/>,
          document.getElementById('example')
        );
    </script>
  </body>
</html>

上述代码中，在Hello, world后面添加了一个数字参数，这个参数的值时通过this.state.number获取的，并且在componentDidMount 方法中有一个定时器，起作用是每隔1秒钟调用一次handleNumberAdd 方法，在handleNumberAdd 方法中则是将this.state.number的值加上1之后再赋值给number，那么this.setState是用来干嘛的呢？其实从字面意思就很容易理解，它其实就是用来更新React组件内部的state对象的。运行代码会很容易发现，在界面中每隔一秒钟Hello, world! Number : 0的值就会增加1，观察可以发现这个数值更新时浏览器并没有整体更新，这便是前面讲的虚拟DOM的作用了。

  • state是用来向维持React组件当前时刻的状态的，一旦这个状态有变化，那么组件就会计算虚拟DOM并且重新渲染变化。
4、React常用函数
  • (1)getDefaultProps：该方法用来设置React组件的默认属性，return一个js对象
  • (2)getInitialState : 该方法用来设置React组件的默认状态，return一个js对象或者null
  • (3)componentDidMount : 当组件渲染完毕之后调用
  • (4)componentWillUnmount : 当组件即将销毁时调用
  • (5)componentDidUpdate ： 当组件更新完成之后调用
  • (6)setState : 用来更新当前组件的状态
  • (7)render : 用来返回需要渲染的内容

二、JXS

简单来讲，JSX其实就是js，只是jsx允许在js中写html代码。（上面介绍React的时候我们已经使用到了JSX的语法了）
例如：

 render: function() {
            return (
              <div>
                Hello, world! Number : {this.state.number}!
              </div>
            );
          }

几个需要注意的地方：

  • 1、在JSX中写class时要写成className，例如<div className="test_class"></div>
  • 2、在JSX中写内嵌样式style时，必须要使用对象。例如：
    var style = { color : red }; <div style={style}></div>
  • 3、JSX返回的HTML标签最外层只能有一个html标签。例如：
return （<div>
            Hello, world! Number : {this.state.number}!
        </div>）

是允许的，但是

return （<div>
            Hello, world! Number : {this.state.number}!
        </div>
        <div>
            Hello, world! Number : {this.state.number}!
        </div>）

是不允许的。

Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

avatar 开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平

avatar 开放原子开发者工作坊

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

avatar 开放原子开发者工作坊