React随记

最新推荐文章于 2024-08-22 17:16:15 发布

书之岁华

最新推荐文章于 2024-08-22 17:16:15 发布

阅读量171

点赞数 1

分类专栏： React JS 文章标签： react

JS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

React

1 篇文章 0 订阅

订阅专栏

React是Facebook开源的一款JavaScript库，只专注于MVC框架中的V，即视图。
通过 diff算法 和 虚拟DOM 实现视图的高效更新。
使用组件化开发方式，符合现代Web开发的趋势，适用于大型Web项目。

一、React和其他一些JS框架的比较

1.不是MVC框架，只专注于view层。
2.单向数据绑定，单向的从数据到视图的渲染。
3.不直接操作DOM对象，而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。

在使用react.js之前要先搭建nodeJs，因为要引用其中大量的库，或许是你已经熟悉的。

二、React特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟（虚拟DOM），最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，代码容易得到复用，能够很好的应用在大项目的开发中。
6.单向数据绑定 − 实现了单向响应的数据流，从而减少了重复代码，比传统数据绑定更简单。

如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

三、React JSX

JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之间可以互相嵌套。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

    JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
    它是类型安全的，在编译过程中就能发现错误。
    使用 JSX 编写模板更加简单快速。

嵌套多个 HTML 标签，需要使用一个 div 元素包裹它
ReactDOM.render(
	<div>
	<h1>东方神起</h1>
	<h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
	,
	document.getElementById('example')
);

JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。

JSX 中不能使用 if else 语句，单可以使用 conditional (三元运算) 表达式来替代。
ReactDOM.render(
	<div>
	  <h1>{i = 1 ? 'True!' : 'False'}</h1>
	</div>
	,
	document.getElementById('example')
);

React 推荐使用内联样式。可以使用 camelCase 语法来设置内联样式。 React 会在指定元素数字后自动添加 px 。

var myStyle = {
	fontSize: 100,
	color: '#FF0000'
};
ReactDOM.render(
	<h1 style = {myStyle}>hello</h1>,
	document.getElementById('example')
);

注释需要写在花括号中

ReactDOM.render(
	<div>
    <h1>hello</h1>
    {/*注释...*/}
 	</div>,
	document.getElementById('example')
);

JSX 允许在模板中插入数组，数组会自动展开所有成员

var arr = [
  <h1>hello</h1>,
  <h2>yyt</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

四、React 组件

例：封装一个输出 "Hello World！" 的组件，组件名为 HelloMessage：
var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World！</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

React.createClass 方法用于生成一个组件类 HelloMessage。
<HelloMessage /> 实例组件类并输出信息。

HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。
除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

如果我们需要向组件传递参数，可以使用 this.props 对象
var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="yyt" />,
  document.getElementById('example')
);

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

五、React State(状态)

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。
当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。 

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。点我切换状态。
      </p>
    );
  }
});

React.render(
  <LikeButton />,
  document.getElementById('example')
);

六、React Props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。
有些容器组件需要定义 state 来更新和修改数据。有些组件只能通过 props 来传递数据。

name 属性通过 this.props.name 来获取。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="yyt" />,
  document.getElementById('example')
);

默认 Props：通过 getDefaultProps() 方法为 props 设置默认值

<body>
  <div id="example"></div>
  <script type="text/babel">
    var HelloMessage = React.createClass({
    getDefaultProps: function() {
      return {
        name: 'yyt'
      };
    },
    render: function() {
      return <h1>Hello {this.props.name}</h1>;
    }
  });

  ReactDOM.render(
    <HelloMessage />,
    document.getElementById('example')
  );
  </script>
</body>

在应用中组合使用 state 和 props。我们可以在父组件中设置 state，并通过在子组件上使用 props 将其传递到子组件上。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "yyt",
      site: "http://yyt.com"
    };
  },
 
  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

Props 验证：Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用。
React.PropTypes提供很多验证器 (validator) 来验证传入数据是否有效。
当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

var title = "niubi";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
React.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

七、React 组件生命周期

React 组件的生命周期函数，又叫钩子函数，它能响应不同的状态。

 组件的生命周期可分成三个状态：

    Mounting：已插入真实 DOM
    Updating：正在被重新渲染
    Unmounting：已移出真实 DOM

八、React AJAX

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取。
当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>W3Cschool教程 React 实例</title>
    <script src="//www.w3cschool.cn/statics/assets/react/react.min.js"></script>
    <script src="//www.w3cschool.cn/statics/assets/react/react-dom.min.js"></script>
    <script src="//www.w3cschool.cn/statics/assets/react/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  </head>
 <body>
    <div id="example"></div>
    <script type="text/babel">
      var UserGist = React.createClass({
        getInitialState: function() {
          return {
            username: '',
            lastGistUrl: ''
          };
        },

        componentDidMount: function() {
          this.serverRequest = $.get(this.props.source, function (result) {
            var lastGist = result[0];
            this.setState({
              username: lastGist.owner.login,
              lastGistUrl: lastGist.html_url
            });
          }.bind(this));
        },

        componentWillUnmount: function() {
          this.serverRequest.abort();
        },

        render: function() {
          return (
            <div>
              {this.state.username} 用户最新的 Gist 共享地址：
              <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
            </div>
          );
        }
      });

      ReactDOM.render(
        <UserGist source="https://api.github.com/users/octocat/gists" />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

九、React Refs

React 支持一种非常特殊的属性 Ref ，可以用来绑定到 render() 输出的任何组件上。
ref 属性的值可以是一个字符串也可以是一个函数。

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);