react的基本操作(1)-白红宇

react的基本操作(1)

阅读量：5038 次

发布时间：2019-06-12

本文共 1910 字，大约阅读时间需要 6 分钟。

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).

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

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

function New(props,refs){                console.log(props,refs)                return New
;            }            ReactDOM.render(                
     ,                document.getElementById('example')            );

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

class New extends React.Component {        render() {            return ( 　　　　　　　　New
            )        }    ReactDOM.render(        
     ,        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 (      
             
      Hello, world!
        
      现在是 {
   this.state.date.toLocaleTimeString()}.
      
     
    );  }} ReactDOM.render(  
     ,  document.getElementById('example'));

3.refs 使用

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