ReactJs 小记

最新推荐文章于 2022-02-19 20:58:13 发布

Mr_linjw

最新推荐文章于 2022-02-19 20:58:13 发布

阅读量498

点赞数

本文链接：https://blog.csdn.net/Mr_linjw/article/details/51351629

版权

引入文件有

react.min.js

eact-dom.min.js

browser.min.js

JSXTransformer.js

helloWord如下：

React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

<body>
    <div id="example"></div>
    <script type="text/babel" src="src/helloworld.js"></script>
</body>

注：js文件类型必须为label，react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

<strong>var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h2>Hello, world! I am a CommentBox.<h2>
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById(</strong>example<strong>)
);</strong>

注：使用外部组件可引入JSXTransformer.js

1、组件开头（CommentBox ）必须为大写，

2、render里面的原生html元素必须小写，

3、使用原生class属性必须写为className

4、render只能渲染一个层，即如果render里面包含多个并列的div,则所有元素必须包含在一个父div里（即不能是多个div，所有div的必须包括在一个块里，刚开始这个困扰很久）

5、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}

6、这里需要注意的是，react并不依赖jQuery，当然我们可以使用jQuery，但是render里面第二个参数必须使用JavaScript原生的getElementByID方法，不能使用jQuery来选取DOM节点。

7、变量名用{}包裹，且不能加双引号

UI组件使用

REACT UI
https://github.com/Lobos/react-ui/ 组件地址
http://lobos.github.io/react-ui/0.6/ 说明文档

映入文件为

Form.js

ReactUI.js

使用方法：ReactUI.+组件名称如（<ReactUI.Table ref = "row"></ReactUI.Table>）

2、组件状态

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：

这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。效果如下：

原理分析：

当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

这里值得注意的几点如下：

1）getInitialState函数必须有返回值，可以是NULL或者一个对象。

2）访问state的方法是this.state.属性名。

3）变量用{}包裹，不需要再加双引号。

3、组件的生命周期

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

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

下面来看一个例子：

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

4、PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（查看 demo06）。


var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。


var data = 123;

ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

这样一来，title属性就通不过验证了。控制台会显示一行错误信息。


Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

更多的PropTypes设置，可以查看官方文档。

此外，getDefaultProps 方法可以用来设置组件属性的默认值。


var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

上面代码会输出"Hello World"。

Mr_linjw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ReactJs 小记

引入文件有react.min.jseact-dom.min.jsbrowser.min.jshelloWord如下： babel" src="src/helloworld.js">注：js文件类型必须为labelvar CommentBox = React.createClass({ render: function() { re
复制链接

扫一扫