React 学习记录 2📝

作者：程序员海军

2022 年 7 月 26 日
本文字数：4275 字
阅读完需：约 14 分钟

生命周期

装载过程

constructor
componentWillMount
render
componentDidMount

`constructor`

它是 ES6 的构造函数，当创建一个有状态组件实例时，会自动调用构造函数。
React 组件需要构造函数的原因：
初始化 state
绑定成员函数 this 环境。 this 指向当前组件实例。

`componentWillMount`

componentWillMount 在 render 前执行。
一般不用定义这个生命周期函数，因为componentWillMount 发生在将要装载时，这时没有任何渲染出来。

render

所有 React 组件的父类 React.Component 类对除 render 之外的生命周期函数都有默认实现。
render 函数不做实际的渲染，它只是返回一个JSX描述的结构，最终交给 React 来渲染

componentDidMount

componentDidMount 在 render 后执行，当componentDidMount被调用时，组件已经被装载到 DOM 树上了。

React 核心概念

`JSX`

什么是 JSX ？
JSX 被称为 JavaScript 的扩展，可以在 JavaScript 中写标签语法。
JSX 有哪些特性？
可以嵌入表达式
给标签加特定属性
可以使用 JSX 来指定子元素
JSX 可以防止注入攻击
JSX 表示对象
使用 JSX
在单文件入口的 return 渲染元素部分使用 { } 来传入 JSX

const info = {  code:200,  msg:'前端自学社区'}
// JSX 对象const element = (  <div>    <h2>jsx 对象</h2>  </div>)
// 指定特定属性const content = <div><h3 data-code='200'>{info.code}</h3></div>

function changeInfo(info){  if(info.code === 200) {    return <h1>请求成功</h1>  } else {    return <h1>请求失败</h1>  }}


function App() {  return (    <div className="App">      <header className="App-header">                <div>          {content}          {element}        </div>        <h1>{info.code}</h1> <br/>        <h2>{info.msg}</h2> <br/>        {/* JSX表达式 */}        <h3>{changeInfo(info)}</h3> <br/>      </header>    </div>  );}
export default App;

复制代码

`元素渲染原理`

在 React 中一个 js 文件可以为一个组件，每个组件都必须有一个根元素DOM 节点来包裹内部元素，这个 根DOM 由 React DOM 来管理。
React 是由多个 DOM 元素来构成的 React 应用。
如何将多个 React 元素 渲染到根节点呢？
把多个DOM 放到 ReactDOM.render()即可，这样一个完整的React应用就构成了
注意
React 元素一旦被创建，就无法更改内部元素和属性 , 想要更新的话，再次调用 ReatDOM.render()
React 只更新它变化的部分， React DOM 会对新的状态和旧的状态进行对比来更新。

`组件探索`

组件分类
函数组件
class 组件

函数组件

它接受唯一带有数据的props 对象并返回一个 React 元素，它本质是一个 JavaScript 函数。在不需要状态数据管理时，使用。
注意：
Props 为只读属性，不能修改

function Test(props) {    return (        <div>            {props.name}        </div>    )}
export default Test

复制代码

class 组件

class 组件 有自己的数据状态管理 ( state )，而函数组件没有状态管理，它只能读( props) 。
state注意：
state 不能直接修改，必须通过 this.setData( { } ) 来修改。
state异步更新时, this.setData ( (satate, props) => { } ) 接受的不是一个对象而是一个函数。
数据是向下流动的，可以在子组件上传递该组件state数据，子组件通过 props 来接收使用

`事件处理`

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

import React, { Component } from 'react';
class Personal extends Component {    constructor(props) {        super(props);        this.state = {             name:'前端 HaiJun'         }        // 注册方法，如果不使用bind，在JSX中调用方法时，this 为 undefined,就会报错        this.changeName = this.changeName.bind(this)    }    changeName(){        this.setState({            name: '前端 海军'        })    }    render() {         return (             <div>                <h2>{this.state.name}</h2>                <button onClick={this.changeName}>修改Name</button>            </div>         );    }} export default Personal;

复制代码

向事件传递参数

<button onClick={this.changeNum.bind(this,id)}>修删除 </button>
<button onClick={(e) =>this.changeNum(23123123,e) }>删除</button>

`条件渲染`

在 React 中根据条件来渲染一共有 4 种方法
1.元素变量控制
2.与运算符&&控制
3.三目运算符控制
4. 隐藏组件显示

`元素变量控制`

定义一个变量来管理控制状态
根据状态变量来决定显示哪个组件被显示, 定义一个变量来存放显示的组件。
在页面中，直接通过 { 存放组件的变量 }

this.state = {      status:false}     

render() {          let showStatus;         if(this.state.status){             showStatus =  <Son1 />         } else {            showStatus = <Son2/>         }         return (              <div>                 {showStatus}             </div>          );     }

复制代码

`与运算符&&控制`

在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。


                {this.state.status &&                    <Son1 />                }

复制代码

`三目运算符控制`

使用格式： { 状态？组件1 ：组件2 }

你的选择是 {this.state.status ? <Son1 /> : <Son2 />}

复制代码

`隐藏组件`

无状态组件通过接受传递过的 props ，根据 props 的状态来决定是否显示，不显示的话，直接 return null
render 方法直接返回 null，而不进行任何渲染。

#Son3function IfSon3(props){    if(!props.status) {        return null    }        return (        <div>            Welcome to React         </div>    )}

export default IfSon3;



#Main<Son3 status={true}/>

复制代码

`列表循环 key`

let arrayList = [  {    index:1,    title:'React'  },  {    index:2,    title:'Vue'  },  {    index:3,    title:'Jquery'  },]


<For list={arrayList}/>        function For(props){    return (        <div>            <ul>                {props.list.map(zxItem => {                   return  <li key={zxItem.index}>{zxItem.title}</li>                })}            </ul>        </div>    )}
export default For

复制代码

`受控组件`

在 React 中，表单受控组件都有自己的状态 state ，通过 setDate 来更新自己的 state .
受控组件有： <input> <textarea> <select>
注意：
input , textarea 通过指定value 值，然后通过 onChange 事件来更新组件的state
select 通过 value 来指定默认选中项，也可以多选，value为数组即可
处理多个输入时，可以给 input 添加 name 属性，然后onChange 都指定为一个，就可以同时监听多个state，通过 e.target.name 来区分。

/* * @Description:  * @Author: ZhangXin * @Date: 2021-02-01 16:43:02 * @LastEditTime: 2021-02-11 17:36:17 * @LastEditors: ZhangXin */import React, { Component } from 'react';

class Form extends Component {    constructor(props) {        super(props);        this.state = {             username:'',            address:'',            hobby:'',            selectValue:1,            menuList:[                {                    id:1,                    title:'炸薯条'                },                {                    id:2,                    title:'炸蘑菇'                }            ]         }        this.changeContent = this.changeContent.bind(this)        this.changeSelect = this.changeSelect.bind(this)        this.getFormValue = this.getFormValue.bind(this)
    }    changeContent(e){        console.log(e)        const name = e.target.name         switch (name) {            case 'username':                this.setState({                    username: e.target.value                })                break;            case 'address':                this.setState({                    address: e.target.value                })                break;            case 'hobby':                this.setState({                    hobby: e.target.value                })        } 
    }    changeSelect(e){        console.log(e.target.value)
        this.setState({            selectValue: e.target.value        })    }    getFormValue(){        alert(this.state.username +'-----------'+ this.state.address+'-----------'+ this.state.hobby)    }    render() {         return (             <div>                <form action="">                    <input  name="username"   type="text" value={this.state.username} onChange={this.changeContent}/> <hr/>                    <input  name="address"  type="text" value={this.state.content} onChange={this.changeContent}/> <hr/>                    <input  name="hobby"  type="text" value={this.state.content} onChange={this.changeContent}/> <hr/>                    <select  name="hobby"  placeholder="请选择美食" id="" value={this.state.selectValue}  onChange={this.changeSelect} >                       {                           this.state.menuList.map( item => {                               return  <option value={item.value} key={item.id}>{item.title}</option>                           })                       }                     </select>                    <button onClick={this.getFormValue}>获取表单值</button>                </form>            </div>         );    }} export default Form;

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/0ff8dbefeb613cfbff0c50353】。文章转载请联系作者。

程序员海军

关注

还未添加个人签名 2020.04.02 加入

🏅目前从事物流，铁路相关的前端全栈开发工作. 🏆2021年InfoQ写作平台-签约作者 🏆 🏆微信公众号：【前端自学社区】

发布

暂无评论

创作场景

React 学习记录 2📝

生命周期

装载过程

`constructor`

`componentWillMount`

React 核心概念

`JSX`

什么是 `JSX` ？

`JSX` 有哪些特性？

使用 `JSX`

`元素渲染原理`

如何将多个 `React 元素` 渲染到根节点呢？

注意

`组件探索`

组件分类

函数组件

注意：

class 组件

`state`注意：

`事件处理`

向事件传递参数

`条件渲染`

`元素变量控制`

`与运算符&&控制`

`三目运算符控制`

`隐藏组件`

`列表循环 key`

`受控组件`

注意：

程序员海军

评论

创作场景

React 学习记录 2📝

生命周期

装载过程

constructor

componentWillMount

React 核心概念

JSX

什么是 JSX ？

JSX 有哪些特性 ？

使用 JSX

元素渲染原理

如何将多个 React 元素 渲染到根节点呢？

注意

组件探索

组件分类

函数组件

注意：

class 组件

state注意：

事件处理

向事件传递参数

条件渲染

元素变量控制

与运算符&&控制

三目运算符控制

隐藏组件

列表循环 key

受控组件

注意：

程序员海军

评论

`constructor`

`componentWillMount`

`JSX`

什么是 `JSX` ？

`JSX` 有哪些特性？

使用 `JSX`

`元素渲染原理`

如何将多个 `React 元素` 渲染到根节点呢？

`组件探索`

`state`注意：

`事件处理`

`条件渲染`

`元素变量控制`

`与运算符&&控制`

`三目运算符控制`

`隐藏组件`

`列表循环 key`

`受控组件`