react的基本操作(1)

2018-08-02 06:22:11来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1.react 组件创建

首先要引入以下三个库:

  • react.min.js - React 的核心库
  • react-dom.min.js - 提供与 DOM 相关的功能
  • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平

react组件的创建有三种方式:

(1).

<script type="text/babel"> //类型必须为babel
    var Hello =React.createClass({
        render:function(){
            return <p>hello</p>;
        }
    });
    ReactDOM.render(
        <Hello/>,
        document.getElementById('exp')
    )
</script>

首先创建react 组件类,在通过ReactDOM.render()将其渲染在id为exp的dom中

(2)使用函数定义了一个组件:

function New(props,refs){
                console.log(props,refs)
                return <p>New</p>;
            }
            ReactDOM.render(
                <New class="q"/>,
                document.getElementById('example')
            );

(3)使用 ES6 class 来定义一个组件:

class New extends React.Component {
        render() {
            return (
        <p>New</p> ) } ReactDOM.render( <New/>, document.getElementById('ex') )

2.react State(状态)

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。

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

以下实例创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前的时间。

添加一个类构造函数来初始化状态 this.state,类组件应始终使用 props 调用基础构造函数。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};//初始化state
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

 

3.refs 使用

class New extends React.Component {
        render() {
            return (
                <div ref>//在组件的某个节点标签上 添加 ref
                         //即可在this.refs中看到该节点下的所有 节点,即数据
                    <p>1</p>
                    <span>2</span>
                </div>
            )
        }
        componentDidMount(){
            console.log(this.refs.true.children[0].innerHTML)//通过refs获取带有 ref节点的 第一个子元素的内容
        }
    }
    ReactDOM.render(
        <New/>,
        document.getElementById('ex')
    )

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js如何发送wss协议的请求,以及接受服务器返回的数据

下一篇:json字符串和json对象的相互转化