react基础知识点部分总结

时间：2021-02-24 13:02:18 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：导致注意函数 component state src 表达异步 children

（一） react 特点:
1.声明式设计：前端的 vm 和 v 绑定在一起，vm 一变化，v 自动发生变化。
2.高效：主要是区别于最早的 jquery，不用手动去修改节点。
3.JSX ：在 vue 中，通过 template（模板）来描述我们的视图长什么样子。在react中，是通过 JSX 来描述视图长什么样子。JSX返回的是虚拟DOM。
4.虚拟 DOM：在react 修改视图不会直接去操作DOM，而是首先修改虚拟DOM，所谓虚拟DOM，就是指使用js对象来描述DOM节点的结构
5.单向数据流： state（驱动应用的数据源）、view（视图）、actions（用户的操作）在 react 中，首先用户可以操作视图，操作视图后，会导致数据状态的改变，数据状态一改变，视图又重新发生改变，给用户呈现出新的视图。
6.Diff 算法：在虚拟dom中，会用 js 对象来表示dom树的结构，然后用虚拟dom生成真实dom，插入到文档。当数据发生变化时，重新生成一颗新的虚拟dom树，通过 diff 算法比较两颗树的差异。最终把变化的部分重新渲染到dom树中。
（二）安装 react

  <!-- 引入 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>

react.js：react 核心库。
react-dom.js：提供与 DOM 操作相关的功能。
babel.js ：负责将 JSX 进行解析

（案例如下）

<body>
    <div id="app"></div>
    <!-- 引入 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>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello</h1>
            ,document.getElementById(‘app‘));
    </script>
</body>

（三）react 元素
JSX 是一种 JavaScript 语法扩展，也就是说，看着像是 html，但是其实是 js 对象。

<script type="text/babel">
        const ele = (
            <div>
                <p>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
            </div>

        );
        ReactDOM.render(
            ele
            ,document.getElementById(‘app‘));
    </script>

（四）JSX 中的细节
1. JSX 根元素只能有一个，这一点和 vue2.0 的模板语法是一样。
2. 在 JSX 中，可以书写简单的 js 表达式

<script type="text/babel">
        const ele = (
            <div>
                <p>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
                <p>{1+1}</p>
            </div>
        );
        ReactDOM.render(
            ele
            ,document.getElementById(‘app‘));
    </script>

不能使用语句，只能是表达式

（五）样式
react 中推荐使用内联样式

<script type="text/babel">
        const myStyle = {
            fontSize : 42,
            color : ‘red‘
        };
        const ele = (
            <div>
                <p style={myStyle}>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
                <p>{1+1}</p>
            </div>
        );
        ReactDOM.render(
            ele
            ,document.getElementById(‘app‘));
    </script>

使用类样式的时候，由于 JSX 是 JS 对象，所以不能书写 class，必须写成 className。

<script type="text/babel">
        const ele = (
            <div>
                <p className=‘myStyle‘>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
                <p>{1+1}</p>
            </div>
        );
        ReactDOM.render(
            ele
            ,document.getElementById(‘app‘));
    </script>

（六）注释
如果要在 JSX 中书写注释，注释格式为 {/*注释内容*/}

const ele = (
            <div>
                {/*这是一个注释*/}
                <p className=‘myStyle‘>这是 react 中的 jsx</p>
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>梨子</li>
                </ul>
                <p>{1+1}</p>
            </div>
        );

（七）数组
在 React 中，允许渲染存放多个JSX 的数组。

<script type="text/babel">
        const arr = [<h1>f69</h1>,<p>react</p>];
        ReactDOM.render(
            arr
            ,document.getElementById(‘app‘));
    </script>

（八）createElement

JSX 其实只是一个语法糖，他的背后，其实是通过 createElement 的函数创建的 js 对象。

React.createElement(type,[props],[...children])

type: 要创建的元素类型
props：元素属性
children：子元素

const ele = (
	<h1 className=‘f69‘>Hello</h1>
);

等价于

const ele = React.createElement(‘h1‘,{className:‘f69‘},‘Hello‘);

（九）组件
在 react 中，组件分为两种：函数式组件和类组件。

函数式组件

在 react 中，区分组件和函数的方式很简单，组件名为大写，第二个就是要返回一段 JSX。

<script type="text/babel">
        function Com(){
            // 如果是组件，一定会有返回值，并且是返回一段 JSX
            return (
                <div>
                    <h1>欢迎学习 react</h1>
                    <p>f69 是我最喜欢的班</p>
                </div>
            );
        }
        ReactDOM.render(
            <Com />
            ,document.getElementById(‘app‘));
    </script>

类组件

<script type="text/babel">
        class Com extends React.Component{
            render(){
                return (
                    <h1>f69</h1>
                )
            }
        }
        ReactDOM.render(
            <Com />
            ,document.getElementById(‘app‘));
    </script>

组件的组合使用

   <script type="text/babel">
        class Com1 extends React.Component{
            render(){
                return (
                    <h1>组件1</h1>
                )
            }
        }
        class Com2 extends React.Component{
            render(){
                return (
                    <h1>组件2</h1>
                )
            }
        }
        class Com extends React.Component{
            render(){
                return(
                    <div>
                        <Com1/>
                        <Com2/>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com />
            ,document.getElementById(‘app‘));
    </script>

Fragment

<script type="text/babel">
 class Com1 extends React.Component{
            render(){
                return (
                    <h1>组件1</h1>
                )
            }
        }
        class Com2 extends React.Component{
            render(){
                return (
                    <h1>组件2</h1>
                )
            }
        }
        class Com extends React.Component{
            render(){
                return(
                    <React.Fragment>
                        <Com1/>
                        <Com2/>
                    </React.Fragment>
                )
            }
        }
        ReactDOM.render(
            <Com />
            ,document.getElementById(‘app‘));
    </script>

函数式组件

直接通过函数的形参传递过去

<script type="text/babel">
        function Com(props){
            return(
                    <div>{props.name}</div>
                )
        }
        ReactDOM.render(
            <Com name=‘f69999‘ />
            ,document.getElementById(‘app‘));
    </script>

类组件
通过 constructor 的props来接收

 <script type="text/babel">
        class Com extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return(
                    <div>{this.props.name}</div>
                )
            }
        }
        ReactDOM.render(
            <Com name=‘f69‘ />
            ,document.getElementById(‘app‘));
    </script>

defaultprops

默认参数，就好比函数设置默认值一样，如果没有向组件传递参数，那么使用默认值。

函数组件

<script type="text/babel">
        function Com(props){
            return(
                    <div>
                        <p>name {props.name}</p>
                        <p>age {props.age}</p>
                    </div>
                )
        }
        Com.defaultProps = {
            name : ‘xiejie‘,
            age : 19
        }
        ReactDOM.render(
            <Com age={20} />
            ,document.getElementById(‘app‘));
    </script>

类组件设置默认参数

 <script type="text/babel">
         class Com extends React.Component{
            constructor(props){
                super(props)
            }
            static defaultProps = {
                name : ‘xiejie‘,
                age : 18
            }
            render(){
                return(
                    <div>
                    <div>{this.props.name}</div>
                    <div>{this.props.age}</div>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com age={20} />
            ,document.getElementById(‘app‘));
    
    </script>

插槽

<script type="text/babel">
         class Com extends React.Component{
            render(){
                return(
                    <div>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

事件处理

如何绑定事件
this 的指向
向事件处理程序传参

首先，绑定事件是绑定在具体的 JSX 里面的元素中

<script type="text/babel">
         class Com extends React.Component{
            eventHandle(){
                console.log(‘点击事件！！！‘);
            }
            render(){
                return(
                    <div onClick={this.eventHandle}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

函数组件的绑定方法如下：

<script type="text/babel">
        function Com(){
            function eventHandle(){
                console.log(‘eventHandle~~~‘);
            }
            return(
                    <div>
                        <p onClick={eventHandle}>f69</p>
                    </div>
                )
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

this 的指向问题只存在于类组件中，也就是说，类组件存在注意 this 的问题。


<script type="text/babel">
         class Com extends React.Component{
            eventHandle(){
                console.log(this);
            }
            render(){
                return(
                    <div onClick={this.eventHandle}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

在类组件的事件处理函数中，我们无法通过 this 拿到当前的组件，拿到的是一个 undefined。

解决方式
1.将事件处理函数修改为箭头函数

<script type="text/babel">
         class Com extends React.Component{
            eventHandle = ()=>{
                console.log(this);
            }
            render(){
                return(
                    <div onClick={this.eventHandle}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

2.通过 bind 来绑定 this 指向

<script type="text/babel">
         class Com extends React.Component{
             constructor(){
                 super();
                 this.eventHandle = this.eventHandle.bind(this);
             }
            eventHandle(){
                console.log(this);
            }
            render(){
                return(
                    <div onClick={this.eventHandle}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

3.在绑定事件的时候，通过箭头函数来绑定

<script type="text/babel">
         class Com extends React.Component{
            eventHandle(){
                console.log(this);
            }
            render(){
                return(
                    <div onClick={()=>this.eventHandle()}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

向事件处理程序传递参数

1.通过 bind 方法在绑定 this 指向时向事件处理函数传参

<script type="text/babel">
         class Com extends React.Component{
            eventHandle=(name,e)=>{
                console.log(name);
                console.log(e);
            }
            render(){
                return(
                    <div onClick={this.eventHandle.bind(this,‘f69‘)}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

在通过 bind 来绑定的时候，事件处理函数会接收两个参数，第一个是传递过来的参数，第二个是事件对象。

2.通过箭头函数的形式来传递参数

<script type="text/babel">
         class Com extends React.Component{
            eventHandle=(name,e)=>{
                console.log(name);
                console.log(e);
            }
            render(){
                return(
                    <div onClick={(e)=>this.eventHandle(‘f69‘,e)}>
                        <p>这是 react 插槽演示</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com>
                <h1>react 真好玩</h1>
                <p>react 真简单</p>
            </Com>
            ,document.getElementById(‘app‘));
    
    </script>

state

<script type="text/babel">
         class Com extends React.Component{
             constructor(){
                 super();
                 this.state = {
                     name : ‘shasha‘,
                     age : 18,
                     gender : ‘female‘
                 }
             }
            render(){
                return(
                    <div>
                       <p>{this.state.name}</p>
                       <p>{this.state.age}</p>
                       <p>{this.state.gender}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            ,document.getElementById(‘app‘));
    
    </script>

如何来改变组件里面的状态。

在 vue 中，我们要修改组件内部的data 属性，直接 this.属性名赋值即可。

但是在 react 中，需要用到一个方法来修改，setState 方法

<script type="text/babel">
        class Com extends React.Component {
            state = {
                name: ‘qingqing‘,
                age: 18,
                gender: ‘female‘
            }
            eventHandle = ()=>{
                this.setState({
                    name : ‘shasha‘,
                    age : 19                  
                })
            }
            render() {
                return (
                    <div>
                        <button onClick={this.eventHandle}>click</button>
                        <p>{this.state.name}</p>
                        <p>{this.state.age}</p>
                        <p>{this.state.gender}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById(‘app‘));
 </script>

在修改了 state 之后，想要立即获取新的 state 的值。
这个时候是获取不了,因为是异步在处理
setState 接收第二个参数，第二个参数是一个回调函数，可以在回调函数中，获取到最新的值。

eventHandle = ()=>{
                this.setState({
                    name : ‘shasha‘,
                    age : 19
                },()=>{
                    console.log(this.state.name);
                })
            }

条件渲染

<script type="text/babel">
        function Com1(){
            return (
                <h1>编程真好玩</h1>
            )
        }
        function Com2(){
            return (
                <h1>react 真有趣</h1>
            )
        }
        class Com extends React.Component{
            state = {
                whichCom : true
            }
            changeHandle = ()=>{
                this.setState({
                    whichCom : !this.state.whichCom
                })
            }
            render(){
                return (
                    <div>
                        <button onClick={this.changeHandle}>change</button>
                        <div>{this.state.whichCom ? <Com1/> : <Com2/>}</div>
         </div>
                    
                );
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById(‘app‘));

    </script>

如果想要不渲染某一个组件，直接返回 null。

function Com2(){
            return null;
        }

列表渲染

<script type="text/babel">
        class Com extends React.Component{
            state = {
                data : [‘vue‘,‘react‘,‘angular‘,‘jquery‘]
            }
            render(){
                let lis = this.state.data.map((item,index)=>{
                    return (<li key={index}>{item}</li>)
                })
                return (
                    <div>
                        <div>
                            <ul>{lis}</ul>
                        </div>
                    </div>
                    
                );
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById(‘app‘));

    </script>

受控组件与非受控组件（表单）

所谓受控，就是指表单的控件和 state进行了绑定。


<script type="text/babel">
        
        class Com extends React.Component{
            state = {
                content : ‘‘
            }
            changeHandle = (e)=>{
                this.setState({
                    content : e.target.value
                })
            }
            render(){
                return (
                    <div>
                        <input type="text" name="" id="" value={this.state.content} onChange={this.changeHandle}/>
                        <p>你输入的是：{this.state.content}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com></Com>
            , document.getElementById(‘app‘));

    </script>

react基础知识点部分总结

标签：导致注意函数 component state src 表达异步 children

原文地址：https://www.cnblogs.com/wp45945/p/14436955.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行