React

最新推荐文章于 2023-05-06 17:48:34 发布

Bug_yellow

最新推荐文章于 2023-05-06 17:48:34 发布

阅读量257

点赞数 1

文章标签： reactjs

本文链接：https://blog.csdn.net/Bug_yellow/article/details/114005792

版权

1811@TOC

React

react 是一个用于构建用户界面的库，但是由于react拥有一系列的生态技术（react-router、react-redux），所以，我们一般也会把 react 当做是一个框架。
react 是由 facebook 开发的，最早是 facebook 的一个内部项目。原因就是因为该公司对当时市场上所有的 js 框架都不满意，因为当时所有的 js 框架基本都是基于节点的操作。

特点

声明式设计 : 前端多了一个 vm 层，vm 一变化，v 就自动更新。；
高效: 主要是针对对比之前的 jquery 时代，因为不用手动操作节点了。
JSX: 在 react 中，通过 JSX 来描述视图。
虚拟DOM : 如果每次有一点更新，就立马去操作真实的DOM，这个开销是很大的，所以在 react中，提出了虚拟DOM 的概念，通过 js 对象来描述DOM树结构.
单项数据流：
state： 驱动应用的数据源.
view： 以声明方式将 state 映射到视图
actions: 响应在 view 上的用户输入导致的状态变化
diff 算法： 当用户对视图进行更新的时候，先去更新虚拟 DOM，这里说的进行更新，不是在原来的树上面进行更新，而是生成一颗新的树，接下来两棵树就可以进行对比，从而找到不一样的地方，进行更新。

react 安装

通过cdn安装：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

React 元素

JSX
createElement

JSX

<body>
 <div id="app"></div>
 
 <script type="text/babel">//type是进行转码 因为浏览器只认识html、css、js
 	const ele = (<h1>this is a React</h1>);
 	ReactDOM.render(ele, document.getElementById('app'));
 </script>
</body>

JSX特点
1.JSX执行更快，因为它在编译为JavaScript代码后进行了优化。
2.它是类型安全的，在编译过程中就能发现错误。
3.使用JSX编写模板更加简单快速。

React基本用法

JavaScript 表达式
我们可以在JSX中使用JavaScript表达式。表达式写在花括号仍中。

<body>
 <div id="app"></div>
 <script type="text/babel">
 const ele = (
	 <div>
	 	<h1>{1+1}</h1>
	 </div>
 );
 ReactDOM.render(ele , document.getElementById('app'));
 </script>
</body>

注：在JSX中不能使用if else 语句，但可以使用conditional(三元运算）表达式来替代。（在JSX中不能使用if else 语句，但可以使用conditional(三元运算）表达式来替代。）

样式
React推荐使用内联样式。使用camelCase语法来设置内联样式。React会在指定元素数字后添加px

<body>
 <div id="app"></div>
 <script type="text/babel">
	 const myStyle = {
	 	fontSize : 44,
	 	color : 'blue'
	 };
	 ReactDOM.render(
	 	<h1 style = {myStyle}>this is a test</h1>,
	 document.getElementById('app')
 );
 </script>
</body>

如果是要将样式写在JSX里面，可以采用如下的写法:

<body>
 <div id="app"></div>
 
 <script type="text/babel">
	 ReactDOM.render(
	 <h1 style = {{color :'red'}}>this is a test</h1>,
	 document.getElementById('app')
 );
 </script>
</body>

className
如果我们在JSX中要给标签设置class，不能够像HTML中那样直接书写class。
因为上面有提到，虽然JSX看着像HTML，但实际上是JavaScript对象，而在JavaScript中拥
有class关键字，表示类。所以class需要替换为className。
示例如下:

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <!-- 引入 React 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
 <style>
	 .test{
	 text-decoration: underline;
 }
 </style>
</head> <body>
 <div id="app"></div>
 
 <script type="text/babel">
	 ReactDOM.render(
	 <h1 className="test">this is a test</h1>,
	 document.getElementById('app')
 );
 </script>
</body>

数组

JSX允许在模板中插入数组，数组会自动展开所有成员。

<body>
	 <div id="example"></div>
	 <script type="text/babel">
	 const arr = [
		 <h1>欢迎来到 React</h1>,
		 <h2>React 是当前最流行的框架</h2>,
	 ];
	 const ele = (
		 <div>
		 	{ arr }
		 </div>
		 );
		 ReactDOM.render(ele , document.getElementById('example'));
	 </script>
</body>

React基本语法

react 中的组件
- 函数式组件（以前被称之为无状态组件）
- 类组件（以前被称之为有状态组件）
注：在 react 中，创建一个函数式组件非常简单，首先组件名首字母大写、第二个就是要返回一段 JSX

<script type="text/babel">
  function Test(){
    return (
      <h1>Hello</h1>
    )
  }

ReactDOM.render(<Test />, document.getElementById('app'));
</script>

类组件

<script type="text/babel">
  class Test extends React.Component{
    render(){
      return (
        <p>this is a test</p>
      )
    }
  }

ReactDOM.render(<Test />, document.getElementById('app'));
</script>

组件嵌套

<script type="text/babel">
  class HelloReact extends React.Component {
    render() {
      return <h1>hello React</h1>
    }
  }

class HelloJSX extends React.Component {
  render() {
    return <h1>hello JSX</h1>
  }
}

class Welcome extends React.Component {
  render() {
    return (
      <div>
      <HelloReact />
      <HelloJSX />
      </div>
    )
  }
}
ReactDOM.render(<Welcome/>, document.getElementById("app"));
</script>

传递参数
props

<script type="text/babel">
  class HelloReact extends React.Component {
    constructor(props){
      super(props)
    }
    render() {
      return (
        <div>
              <h1>hello React</h1>
              <p>{this.props.name}</p>
              <p>{this.props.gender}</p>
              </div>
      )
		}
}

function HelloJSX(props){
  return (
    <div>
    <h1>hello JSX</h1>
    <p>{props.name}</p>
<p>{props.gender}</p>
</div>
)
}


class Welcome extends React.Component {
  render() {
    return (
      <div>
      <HelloReact name="F71" gender="female"/>
      <HelloJSX name="F72" gender="male"/>
      </div>
    )
  }
}
ReactDOM.render(<Welcome/>, document.getElementById("app"));
</script>

默认 props

<script type="text/babel">
        class HelloReact extends React.Component {
            constructor(props){
                super(props)
            }

            static defaultProps = {
                name : 'ccc',
                gender : 'ddd'
            }

            render() {
                return (
                    <div>
                        <h1>hello React</h1>
                        <p>{this.props.name}</p>
                        <p>{this.props.gender}</p>
                    </div>
                )
            }
        }

        function HelloJSX(props){
            return (
                <div>
                    <h1>hello JSX</h1>
                    <p>{props.name}</p>
                    <p>{props.gender}</p>
                </div>
            )
        }
        // 函数组件设置 props 默认值
        HelloJSX.defaultProps = {
            name : 'aaa',
            gender : 'bbb'
        }


        class Welcome extends React.Component {
            render() {
                return (
                    <div>
                        <HelloReact name="I am HelloReact"/>
                        <HelloJSX name="I am HelloJSX"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Welcome/>, document.getElementById("app"));
      </script>

插槽

<script type="text/babel">
        class Welcome extends React.Component {
            render() {
                return (
                    <div>
                       <p>这是 welcome 组件</p>
                       {this.props.children}
                    </div>
                )
            }
        }
       ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));
 </script>

事件处理

如何绑定事件
this 指向的问题
传递参数

绑定事件

<script type="text/babel"> 
        function Welcoume(){
            function eventHandle(){
                console.log('函数组件绑定事件');
            }
            return (
                <p onClick={eventHandle}>this is a test</p>
            )
        }

        ReactDOM.render(<Welcome>this is a test</Welcome>, document.getElementById("app"));
      </script>

总结

JSX是一种JavaScript的语法扩展。在React中推荐使用JSX来描述用户界面。
在JSX中，根元素只能有一个，如果出现多个根元素，React将不能正常渲染。
可以在JSX中使用JavaScript表达式。表达式写在花括号中。
React推荐使用内联样式。我们可以使用camelCase语法来设置内联样式。
在JSX中设置class需要写作className。
JSX是一种语法糖，实际上在React底层，提供了createElement方法用于创建并返回指定
类型的新 React元素。

Bug_yellow

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React

1811@TOCReactreact 是一个用于构建用户界面的库，但是由于react拥有一系列的生态技术（react-router、react-redux），所以，我们一般也会把 react 当做是一个框架。react 是由 facebook 开发的，最早是 facebook 的一个内部项目。原因就是因为该公司对当时市场上所有的 js 框架都不满意，因为当时所有的 js 框架基本都是基于节点的操作。特点声明式设计 : 前端多了一个 vm 层，vm 一变化，v 就自动更新。；高效: 主要是针对
复制链接

扫一扫