react的基本操作(1)
程序员文章站
2022-07-01 13:03:12
1.react 组件创建 首先要引入以下三个库: react.min.js - React 的核心库 react-dom.min.js - 提供与 DOM 相关的功能 babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 R ......
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') )