React核心技术-精讲---第一天的讲解(01-React基础篇-快速入门)

心已赠人 2022-01-31 21:19 183阅读 0赞

我建议使用官方教程，配合使用，最好最好阅读原版的官方教程，中文滞后了！！！！

官网教程：[https://reactjs.org/][https_reactjs.org]

华丽的分割线---------------------------------------------------------------------------------------------------------------------------------------------------------

# 1.开始讲今天的第一堂课：（认识一下React，React使用初体验） #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>1.react</title>
    </head>
    <body>
    
    <div id="app"></div>
    
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    
    <script type="text/babel">
        //1.获取页面真实的容器元素
        const containerDiv = document.getElementById('app');
    
        //  2.JSX语法创建虚拟DOM对象
        const vDom = <div> Hello React! </div>;
    
        //  讲虚拟DOM渲染到页面元素上去
        ReactDOM.render(vDom, containerDiv);
    </script>
    
    //这个是简洁写法：
    <script type="text/babel">
        const vDom = <div> Hello React! </div>;
        ReactDOM.render(vDom, document.getElementById('app'));
    </script>
    </body>
    </html>

上面那些文件包可以去官网就可以下载了，或者是菜鸟教程下载！我这边就不做这些花里胡哨的了。

# 2.React中使用JSX语法 #

华丽的分割线---------------------------------------------------------------------------------------------------------------------------------------------------------

# 3.JSX页面常见操作 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div id="app">
    
    </div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      //a).多重标签嵌套：要用一个div包裹着
      ReactDOM.render(
        <div>
          <h2>多重标签嵌套</h2>
          <p>我好了</p>
        </div>
        , document.getElementById('app'));
    </script>
    
    <script type="text/babel">
      //  b).js中变量，表达式要写在{}中
      const str = 'wangcoder';
      ReactDOM.render(
        <div>
          <span>{str}</span>
          <p>100+20*20-2 = {100 + 20 * 20 - 2}</p>
        </div>
        , document.getElementById('app'));
    </script>
    
    
    <script type="text/babel">
      //c. 内联样式通过对象方式引入
      const myStyle = {
        backgroundColor: 'red',
        color: 'yellow',
        fontSize: 30,
      };
      ReactDOM.render(
        <div>
          <h2>来电颜色</h2>
          <div style={myStyle}>颜色来了</div>
        </div>
        , document.getElementById('app'));
    
    </script>
    
    <script type="text/babel">
      //d. 数组遍历
      //1.数据
      const dataArr = [
        {name: 'wang', age: '20'},
        {name: 'wang1', age: '20'},
        {name: 'wang2', age: '22'},
        {name: 'wang3', age: '30'},
        {name: 'wang4', age: '40'}
      ];
      //2.创建虚拟DOM
      const vDom = (
        <ul>
            {
              dataArr.map((data,index) =>
                <li key={index}>{index+1}---姓名：{data.name}---年龄：{data.age}</li>
              )
            }
        </ul>
      );
      ReactDOM.render(
        vDom
        , document.getElementById('app'));
    
    </script>
    </body>
    </html>

### 总结： ###

1. JSX中添加属性时，使用 className 代替 class ,  像label中的for属性，使用htmlFor代替；

2. JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹 ；

3. JSX语法中，标签必须成对出现，如果是单标签，则必须自闭合；

4. 在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 \{\} 中间写 JS代码即可；

5. 在 JSX 中只能使用表达式，不能出现语句；

6. 在 JSX 中注释语法：\{/\* 中间是注释的内容 \*/\}

华丽的分割线---------------------------------------------------------------------------------------------------------------------------------------------------------

# 4.定义组件 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div id="app">
    
    </div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      //a).通过构造函数创建组件
      function Wang() {
        return (
          <div>
            <h2>wangyang</h2>
          </div>
        )
      }
    
      ReactDOM.render(
        <Wang/>,
        document.getElementById('app')
      )
    </script>
    
    
    <script type="text/babel">
      //b).props组件传值，单组件
      function Wang(props) {
        return (
          <div>
            <h2>我叫：{props.name}，性别：{props.gender},学科:{props.colleges}</h2>
          </div>
        )
      }
    
      ReactDOM.render(
        <Wang name="wangcoder" gender="男" colleges={['h5','css3','java','php']}/>,
        document.getElementById('app')
      )
    </script>
    
    
    <script type="text/babel">
      //c).复合组件
      function Name(props) {
        return (
          <div>
            <p>我叫：{props.name}</p>
          </div>
        )
      }
    
      function Gender(props){
        return (
          <div>
            <p>性别：{props.gender}</p>
          </div>
        )
      }
    
      function Colleges(props){
        return (
          <div>
            <p>学科：{props.colleges}</p>
          </div>
        )
      }
    
      function Wang(){
        return (
          <div>
            <Name name="wangyangcoder"/>
            <Gender gender="女"/>
            <Colleges colleges={['h5','css3','java','php']}/>
          </div>
        )
      }
    
    
    
    
      ReactDOM.render(
        <Wang/>,
        document.getElementById('app')
      )
    </script>
    </body>
    </html>

但是，我们标准，常规定义组件，是这样子的：

## 总结： ##

***构造函数创建组件和  class关键字创建组件的区别？？？（这个是面试题了-大家注意了）***

1）构造函数创建的组件叫：无状态组件；

2）class关键字创建的组件叫：有状态组件；

3）有状态组件与无状态组件的本质区别在于是否有state（状态）属性。

华丽的分割线---------------------------------------------------------------------------------------------------------------------------------------------------------

# 5.state使用 #

### 总结：***什么是state?*** ###

1）、React 把组件看成是一个状态机（State Machines）,  通过状态 (State) 去操作状态机。

2）、在开发中, 通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

3）、在React 中，只需更新组件的 state，然后根据新的 state 重新渲染用户界（不要操作 DOM）。

华丽的分割线---------------------------------------------------------------------------------------------------------------------------------------------------------

# 6.props和state混合使用 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div id="app"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      //1.组件类
      class Dog extends React.Component {
        constructor(props) {
          super(props);
          //狗：姓名，性别，年龄，狗友
          //2.初始化state
          this.state = {
            age: 1,//年龄
            dogFriends: [],//狗友
          }
    
        }
    
        //  3.设置props属性的默认值
        static defaultProps = {
          name: 'wang',
          gender: '母',
        };
    
        //4.设置props属性的类型
        static propTypes = {
          name:PropTypes.string.isReferenced,
          gender: PropTypes.string.isReferenced
        };
    
        render() {
          const {name, gender} = this.props;
          const {age, dogFriends} = this.state;
          return (
            <div>
              <p>狗名：{name},性别：{gender}</p>
              <p>我今年{age}岁</p>
              <p>我又很多狗友:</p>
              <ul>
                {dogFriends.map((friend, index) => (
                  <li key={index}>{friend}</li>
                ))}
              </ul>
              <button onClick={() => this.addYear()}>增加一岁</button>
            </div>
          )
        }
    
        addYear() {
          //1、。增加狗友
          let tempArr = this.state.dogFriends;
          tempArr.push('狗友' + Math.floor(Math.random() * 100));
    
          //  2,更新状态
          this.setState({
            age: this.state.age + 1,//年龄
            dogFriends: tempArr,//狗友
          })
        }
      }
    
    
    
      ReactDOM.render(
        <Dog name="小花花"/>,
        document.getElementById('app')
      )
    </script>
    </body>
    </html>

## 总结： ##

1）在单组件中, props一般用于接收外部传入的数据; 而state则用于记录组件内部数据,  而且是需要经常改变的数据。

2）state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。

3）props更多是组件间传递数据的一种方式，props同样也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改。

华丽的分割线---------------------------------------------------------------------------------------------------------------------------------------------------------

# 7.ref使用 #

今天就讲到这里，下期更精彩，不容错过哦！

[https_reactjs.org]: https://reactjs.org/