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

最新推荐文章于 2024-05-05 11:28:26 发布

itwangyang520

最新推荐文章于 2024-05-05 11:28:26 发布

阅读量518

点赞数

分类专栏： WEB前端知识 react Ës6 JavaScript的

本文链接：https://blog.csdn.net/itwangyang520/article/details/90141561

版权

WEB前端知识同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

JavaScript的

17 篇文章 0 订阅

订阅专栏

Ës6

15 篇文章 0 订阅

订阅专栏

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

官网教程：https://reactjs.org/

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

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

<!--
    Created by wangyang on 2019-05-12.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!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语法

<!--
    Created by wangyang on 2019-05-12.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>

<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script>
  //a).通过典型js方式
  //  1.创建变量
  let myClass = 'it-like';
  let myContent = 'wangCoder';
  //  2.创建DOM
  const vDom = React.createElement('span', {className: myClass}, myContent);
  //  3.讲虚拟DOM渲染到页面元素上去
  ReactDOM.render(vDom, document.getElementById('app1'));
</script>

<script type="text/babel">
  //b).通过jsx来创建
  const vDom1 = <span className="{myClass}">{myContent}</span>;
  ReactDOM.render(vDom1, document.getElementById('app2'));
</script>
</body>
</html>

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

3.JSX页面常见操作

<!--
    Created by wangyang on 2019-05-12.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!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.定义组件

<!--
    Created by wangyang on 2019-05-12.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!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>

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

<!--
    Created by wangyang on 2019-05-12.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!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">
  //React中定义组件-class关键字
  class Wang extends React.Component{
    render(){
      return (
        <div>
          <h2>我叫：{this.props.name}，性别：{this.props.gender},学科:{this.props.colleges}</h2>
        </div>
      )
    }
  }

  ReactDOM.render(
    <Wang name="wangcoder" gender="男" colleges={['h5','css3','java','php']}/>,
    document.getElementById('app')
  )
</script>
</body>
</html>

总结：

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

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

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

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

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

5.state使用

<!--
    Created by wangyang on 2019-05-12.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!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">
  //1,创建组件类
  class Wang extends React.Component{
    constructor(props){
      super(props);
      // 2. 初始化状态
      this.state = {
        name: 'wang',
        gender: '男',
        intro: 'itwangyang520'
      };
      this.dealClick = this.dealClick.bind(this);
    }
    render(){
      const {name, gender, intro} = this.state;
      return (
        <div>
          <h3>我叫：{name}, 性别：{gender}, 代表作：{intro}</h3>
          {/*<button onClick={()=>this.dealClick()}>换一个</button>*/}
          <button onClick={this.dealClick}>换一个</button>
        </div>
      )
    }
    dealClick(){
      // alert('点了'+this);
      this.setState({
          name: 'wang2',
          gender: '女',
          intro: 'itwangyang'
        });
    }
  }
//  2.渲染到DOM容器
  ReactDOM.render(<Wang/>,document.getElementById('app'));
</script>
</body>
</html>

总结：什么是state?

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

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

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

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

6.props和state混合使用

<!--
    Created by wangyang on 2019-05-12.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!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使用

<!--
    Created by wangyang on 2019-05-12.
    itwangyang@gmail.com
    http://www.itwangyang.xyz
-->
<!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">
  class CustomTextInput extends React.Component{
    constructor(props){
      super(props);
      //绑定ref
      this.myInput = React.createRef();
      this.myBtn = React.createRef();
    }
    render(){
      return (
        <div>
          <input type="text" placeholder="请您输入内容" ref={this.myInput}/>
          <input type="button" value="获取焦点" onClick={()=>this.focusText()} ref={this.myBtn}/>
        </div>
      )
    }
    focusText(){
      // alert("gahha");
      console.log(this.myInput);
      this.myInput.current.focus();
      console.log(this.myBtn);
    }
  }
  ReactDOM.render(
    <CustomTextInput/>,
    document.getElementById('app')
  );
</script>
</body>
</html>

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

itwangyang520

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
React核心技术-精讲---第一天的讲解(01-React基础篇-快速入门)

我建议使用官方教程，配合使用，最好最好阅读原版的官方教程，中文滞后了！！！！官网教程：https://reactjs.org/华丽的分割线-------------------------------------------------------------------------------------------------------------------------------...
复制链接

扫一扫