JZTXT

react

发布时间 2023-06-01 18:01:18作者: 提莫一米五呀

react

入门

相关js库

  • react.js: React的核心库

  • react-dom.js: 提供操作DOM的react扩展库

  • babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

两种创建虚拟dom方法

  • js
React.createElement('h1', {id: 'title'}, 'hello,react')
  • jsx
<script type="text/javascript" src="../js/react-16.0.8/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-16.0.8/react-dom.development.js"></script>
<script type="text/javascript" src="../js/react-16.0.8/babel.min.js"></script>
<script type="text/babel"> // 必须声明babel
// 创建虚拟DOM元素
const vDOM = (<h1>Hello world</h1>)
// 渲染虚拟DOM到页面真实DOM容器中
ReactDOM.render(vDOM, document.getElementById('test'))

react面向组件编程

自定义组件两种方式

  • 函数式组件
function MyComponent () {
  return <h2>工厂函数组件(简单组件)</h2>
}
ReactDOM.render(<MyComponent />, document.getElementById('example1'))
  • 类组件(复杂组件)
class MyComponent2 extends React.Component {
  render () {
    console.log(this) // MyComponent2的实例对象
    return <h2>ES6类组件(复杂组件)</h2>
  }
}
ReactDOM.render(<MyComponent />, document.getElementById('example1'))

组件三大属性(复杂组件)

  • state