前端入门之React入门指南，CSS全局样式的设置

3. 标签中的自定义属性使用data

自定义属性

4. 渲染 html字符串 使用 dangerouslySetInnerHTML 属性

• 来啊呀"}}>
• 5. bool类型的值 可以这样用
  6. 当属性太多了，可以使用 … 扩展运算符

  const props={

  className:“redCls”,

  “data-index”:5

  }

  7. 行内样式的写法

  tips: 在vscode上安装插件：vscode-styled-jsx，高亮jsx代码，提高编程体验。

  组件的创建

  在react中，组件分为两种，类组件 和 函数式组件

  1. 简单功能 使用 函数式组件

  2. 复杂功能 使用 类组件

  3. 组件名都必须大写

  类组件

  使用ES6创建Class的方式来实现一个组件类

  • 首字母要大写

  • 要继承 React中的Component类

  • 必须实现render函数，函数内返回标签

  • 组件有自己的state和生命周期

  import React,{Component} from ‘react’;

  import ReactDOM from ‘react-dom’;

  import “./index.css”;

  class App extends Component {

  render() {

  return (

  嘿嘿嘿

  )

  }

  }

  ReactDOM.render(, document.getElementById(‘root’))

  函数式组件

  也叫做无状态组件，简单功能的组件可以使用函数式组件，性能更高。

  函数式组件其实就是一个函数，只不过函数内部需要返回对应的标签

  • 首字母要大写

  • 函数内要返回标签

  import React from ‘react’;

  import ReactDOM from ‘react-dom’;

  import “./index.css”;

  const App = () => {

  return (

  简单的函数式组件

  )

  }

  ReactDOM.render(, document.getElementById(‘root’))

  小结

  • 函数式组件性能更高，因为没有生命周期

  • 函数式组件更方便进行测试

  • 能不用类组件就不用类组件

  • 当要使用 state 时，就要使用类组件

  状态和属性

  在React中，用状态(state)和属性(props)来实现数据动态化。下面分别来讲讲这两个概念。

  状态：state

  怎么理解state？

  • 在react中，组件内部的数据是通过state来实现和管理</