React 基础介绍 1 （语法介绍）

时间 2020-08-13 标签 react 基础介绍语法

React 基础介绍 1 （语法介绍）

最近观察了几个 混合APP 的方案，感受各有优点，底层原理也各自不一样。适合的项目复杂度也各自不一样；感受你们能够按照本身的项目复杂度以及类型；选取合适的项目解决方案javascript

ReactNative      支持热更新，   比较适合大型项目html

Flutter               不支持热更新，适合大型项目 因为 UI 库是独立于原生的，因此能够作到 很是顺滑的 UI感觉，java

Vue ++ 支持热更新，   中小型项目首选，有丰富的 NPM 插件库，      react

Uniapp              支持热更新，（本质仍是VUE），原生插件相对较多（有对应的原生插件市场）。 NPM插件方面相对于 Vue比较欠缺，适合中小型，npm

下面咱们就来学习学习 React！数组

知识点：

● React 项目的建立

React 库的引入：babel

多页面 CDN 方式引入

单页面 npm, yarn
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React demo4</title>
    
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
   <div id="app"></div>
   <script>

    var hello = React.createElement('h1',{},'hello world');
    ReactDOM.render(hello,document.getElementById('app'));

   </script>
</body>

</html>
基本语法：一下三种是 React 最基本的三种语法app

ReactDOM.render()                渲染节点

React.createElement()           建立一个元素

React.Component()                组件的建立

● React 生命周期

四个阶段dom

组件初始化阶段函数
组件接在阶段
数据更新阶段
组件销毁阶段

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心库 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相关 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <div id="app1"></div>

  <script type="text/babel">

    //组件
    class HelloView extends React.Component {

      constructor(props) {
        console.log('初始化阶段')

        //初始化 props
        super(props)
        //初始化 状态
        this.state = {
          name: "jack",
          age: 31
        }
      }

      componentWillMount() {
        console.log('组件加载前阶段')
      }

      componentDidMount() {
        console.log('组件加载后')
      }


      // updateUser = function(){
      //   this.setState({
      //     name:'Tom',
      //     age:32
      //   })

      //   //错误的语法 不会触发 render
      //   //this.state.name = 'Tom'
      // }.bind(this)

      updateUser = () => {

        this.setState({
          name: 'Tom',
          age: 32
        })

        //错误的语法 不会触发 render
        //this.state.name = 'Tom'
      }

      shouldComponentUpdate() {
        console.log('数据是否要更新')
        return true;
      }

      componentWillUpdate() {
        console.log('数据即将更新')
      }
      componentDidUpdate() {
        console.log('数据已经更新')
      }

      componentWillUnmount() {
        console.log('数据销毁')
      }

      render() {
        console.log('组件加载 数据渲染 更新')
        return <div>
          <h1 > Hello HelloView </h1>
          <p>姓名：{this.state.name}</p>
          <p>年龄：{this.state.age}</p>
          <p>擅长：javascript</p>
          <button onClick={this.updateUser}>数据更新</button>
        </div>

      }
    }
    ReactDOM.render(
      <HelloView name="王铁牛" age="23" goods="java" />,
      document.getElementById('app'));




  </script>
</body>

</html>

● JSX语法介绍

JS 中编写 HTML 代码， HTML 代码中也能够嵌套 JS 代码 | 须要插件去作解析（ES6规范）

//原始  写法
var hello = React.createElement('h1',
{
    className:'red',
    name:'jack'
},'hello world');
ReactDOM.render(hello,document.getElementById('app'));

//JSX  语法糖写法  代码中插入 JS
ReactDOM.render(
  <h1 className='red' name='jack'>hello world</h1>
  ,document.getElementById('app'));


//JSX  语法糖写法  HTML 插入代码
var name = 'jack';
var ele  = <h1 className = 'red' name= 'dalao'>hello {name} </h1> 
ReactDOM.render(ele, document.getElementById('app1'));

● 事件处理

代码里面讲到事件的处理，子组件调用父组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心库 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相关 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">


    function Login(props) {
      console.log("Login 子组件 调用")
      return <button onClick={props.callFun}>Login</button>
    }
    function Logout(props) {
      console.log("Logout 子组件 调用")
      return <button onClick={props.callFun}>Logout</button>
    }


    //组件
    class App extends React.Component {

      // constructor(props) {
      //   console.log('初始化阶段')

      //   //初始化 props
      //   super(props)
      //   //初始化 状态
      //   this.state = {
      //     isLogin: false
      //   }
      // }

      // console.log('初始化阶段')


      state = {
        isLogin: false
      }


      updateUser = () => {
        this.setState({
          isLogin: !this.state.isLogin
        })
      }

      render() {
        let isLogin = this.state.isLogin
        let button
        if (isLogin) {
          button = <Login callFun={this.updateUser} />
        } else {
          button = <Logout callFun={this.updateUser} />
        }
        return <div>
          <h1 > Hello HelloView </h1>
          {button}
          <button onClick={()=>{
            this.updateUser
            console.log("App 父组件调用")
          }}>数据更新</button>
        </div>

      }
    }
    ReactDOM.render(
      <App name="王铁牛" age="23" goods="java" />,
      document.getElementById('app'));




  </script>
</body>

</html>

● 元素渲染

对于数据刷新只会修改有变化的地方，效率是比较高效的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心库 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相关 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <div id="app1"></div>

  <script type="text/babel">

    function tick() {

      var time = new Date().toLocaleTimeString();

      var ele = <div>
        <h1 className='red' name='jack'></h1>
        <h2>今天是：{time}</h2>
      </div>


      ReactDOM.render(ele, document.getElementById('app1'));

    }


    setInterval(tick, 1000);
  </script>
</body>

</html>

● 组件和props介绍

基本语法：

React.createClass() 弃用

函数式组件（无状态组件）

<script type="text/babel">

  //函数组件
  function Hello(props) {
    return <div>
      <h1 > Hello World </h1>
      <p>姓名：{props.name}</p>
      <p>年龄：{props.age}</p>
      <p>擅长：{props.goods}</p>
    </div>

  }

  ReactDOM.render(
    <Hello  name="王大锤" age="31" goods="java"/>,
    document.getElementById('app'));
</script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心库 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相关 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <div id="app1"></div>

  <script type="text/babel">

    //函数组件
    function Hello(props) {
      return <div>
        <h1 > Hello World </h1>
        <p>姓名：{props.name}</p>
        <p>年龄：{props.age}</p>
        <p>擅长：{props.goods}</p>
      </div>

    }

    ReactDOM.render(
      <Hello name="王大锤" age="31" goods="java" />,
      document.getElementById('app'));

    //组件继承
    class HelloView extends React.Component {
      render() {
        return <div>      
          <h1 > Hello HelloView </h1>
          <p>姓名：{this.props.name}</p>
          <p>年龄：{this.props.age}</p>
          <p>擅长：{this.props.goods}</p>
        </div>

      }
    }
    ReactDOM.render(
      <HelloView name="王铁牛" age="23" goods="java" />,
      document.getElementById('app1'));

  </script>
</body>

</html>

● 列表渲染

也就是数据的循环

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心库 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相关 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">


    //组件
    class List extends React.Component {

      state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        listTeacher:[
          {id:1,text:'Java'},
          {id:2,text:'JS'},
          {id:3,text:'Python'},
          {id:4,text:'PHP'},
          {id:5,text:'Node'},
        ]
      }


      updateUser = () => {
        this.setState({
          isLogin: !this.state.isLogin
        })
      }

      render() {

        let list = this.state.list;
        let listItem = []
        list.map((item) => {
          let ii = <li key={item}>{item}</li>
          listItem.push(ii)
        })

        this.state.listTeacher.map(item=>{
          let i = <li key = {item.text}>{item.text}</li>
          listItem.push(i)
        })

        return <div>
          <ul>{listItem}</ul>
        </div>

      }
    }
    ReactDOM.render(
      <List />,
      document.getElementById('app'));




  </script>
</body>

</html>

● 表单的应用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React demo4</title>
  <!-- 核心库 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- DOM相关 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 支持JSX -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">


    //组件
    class TodoList extends React.Component {

      state = {
        list: [],
        value: ''
      }

      onHandleAdd = () => {
        // let val = this.state.value;
        // let list = this.state.list;

        let {value, list} = this.state;
        list.push(value);
        this.setState({
          list:list
        })
        this.setState({
          value: ''
        })
      }
      onHandleChange = (event) => {
        this.setState({
          value: event.target.value
        })

      }

      render() {
        let val = this.state.value;
        let arry = this.state.list;
        let listItem = []
        arry.map((item,index) => {
          let li = <li key={index}>{item}</li>
          listItem.push(li)
        })



        return <div>
          <div>
            <input type="text" value={val} onChange={this.onHandleChange} />
            <button onClick={this.onHandleAdd}>添加</button>
          </div>
          <ul>{listItem}</ul>
        </div>

      }
    }
    ReactDOM.render(
      <TodoList />,
      document.getElementById('app'));




  </script>
</body>

</html>