react学习【入门】

react 学习步骤

1、安装依赖包学习

yarn add react@17 react-dom@17

2、引入 react/umd 下的对应开发包

react.development.js 和 react-dom.development.js 来自对应的 node_modules 里

<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>

3、使用 ES5 语法体验复杂的 html 嵌套， 带来的痛点

比如 ul 嵌套 li

var li = React.createElement('li', {className: 'li-1'}, 'hello') var ul =
React.createElement('ul', {id: 'ul-0'}, li) ReactDOM.render(ul,
document.getElementById('app'))

JSX 语法的引入

为了解决日常业务下， 多标签嵌套带来的 js 处理复杂度问题， 引入 ES6 中的 JSX 语法 (JS+XML)，JSX 是一种类似 HTML 的语法扩展
JSX（XML+JS）： 为了解决多层标签嵌套问题

注意：JSX 需要引入 babel 工具转换

1、安装 JSX 语法依赖包

yarn add babel-standalone

2、引入

<script src="../node_modules/babel-standalone/babel.min.js">script>

3、基本使用

可以像写 html 一样，在 js 中写标签结构， 解决了原生 React.createElement(节点,节点属性: object, …标签内容) 带来的痛点

<script type="text/babel">
  let test = (
    <div>
      <h1 className="zhw">zhw</h1>
    </div>
  );
  ReactDOM.render(test, document.getElementById("app"));
script>

注意： JSX 支持完整的 js 语法和 html 书写

React 中的组件

1、函数组件，即： 无状态组件

无状态组件： 不存在 state， 只会有 props， 没有生命周期

function PersonInfo(props) {
  return (
    <div>
      {" "}
      // 不能换行
      <p>欢迎登录</p>
      <p>用户名：{props.name}</p>
    </div>
  );
}

ReactDOM.render(<PersonInfo name="zhw" />, document.querySelector("#app"));

2、class 组件， 即： 有状态组件

使用 class 定义， 并继承 React.Component。有 state 进行数据存储和管理， 同时还有 props 和生命周期

class PersonInfo extends React.Component {
  // 存储组件状态的简写方法
  // 全写方法是 构造函数调用父类this
  state = {
    userName: "zhw",
  };
  // constructor(props) {
  //   super(props)
  //   this.state = {
  //     userName: 'zhw'
  //   }
  //   console.log(props);
  // }
  render() {
    // 只能在render函数里面才能收集到 props
    return (
      <div>
        <p>欢迎登录{this.state.userName}</p>
        <p>用户名：{this.props.name}</p>
      </div>
    );
  }
}

ReactDOM.render(<PersonInfo name="hh" />, document.querySelector("#app"));

3、组件事件

class PersonInfo extends React.Component {
  state = {
    userName: "zhw",
  };
  changeUserName = () => {
    // setState 是个异步方法
    this.setState(
      {
        other: "zzz",
      },
      () => console.log(this.state)
    );
  };
  render() {
    return (
      <div>
        <p>欢迎登录{this.state.userName}</p>
        <button onClick={this.changeUserName}>改变userName</button>
      </div>
    );
  }
}

ReactDOM.render(<PersonInfo />, document.querySelector("#app"));

4、组件传值

将父组件方法传递给子组件

5、受限组件

设置了静态 value 值的表单组件， 无法起到双向绑定的作用 即：用户输入无效果

React 循环遍历

class PersonInfo extends React.Component {
  state = {
    hobbies: [
      {
        id: 0,
        name: "唱",
        level: "first",
      },
      {
        id: 1,
        name: "跳",
        level: "second",
      },
      {
        id: 2,
        name: "Rap",
        level: "third",
      },
      {
        id: 3,
        name: "篮球",
        level: "zero",
      },
    ],
  };
  render() {
    return (
      <div>
        <ul>
          {this.state.hobbies.map((item) => {
            return (
              <li key={item.id}>
                {item.name} --- {item.level}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<PersonInfo />, document.querySelector("#app"));