React开发搭配antd涉及基础知识点

最新推荐文章于 2024-04-08 11:12:31 发布

阿暖啊啊啊啊啊啊

最新推荐文章于 2024-04-08 11:12:31 发布

阅读量404

点赞数

分类专栏： Ubuntu 前端网站文章标签： react antd

本文链接：https://blog.csdn.net/qq_37994458/article/details/84035823

版权

Ubuntu 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

网站

3 篇文章 0 订阅

订阅专栏

哎打代码总觉得开始的时候是最难的因为无处下手很崩溃……慢慢来学代码解释代码吧

state
React是一个状态机，体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI,这样就让用户的数据和界面保持一致了。在React中，更新组件的state，结果就会重新渲染用户界面(不需要操作DOM),一句话就是说，用户的界面会随着状态的改变而改变。state是组件的私有属性，state 只能在本组件中去初始化，并且 state 只能被本组件去修改和仿问，不能被外部仿问和修改，所以也可以说，state 是组件私有的。
toggle
toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

toggle =（）=>{…}

ES6标准新增了一种新的函数：Arrow Function（箭头函数）

x => x * x

上面的箭头函数相当于：
```
function (x) {
	return x * x;
}
```
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return：
```
x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}
```
如果参数不是一个，就需要用括号()括起来：
```
// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}
```
super（）
```
constructor(props){
	super(props);
}
```
调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this
super(props)的目的：在constructor中可以使用this.props。

如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;如果你在constructor中要使用this.props,就必须给super加参数：super(props)；（无论有没有constructor，在render中this.props都是可以使用的，这是React自动附带的；）如果没用到constructor,是可以不写的。
与React组件的生命周期有关，组件挂载时有关的生命周期

1、constructor( )
2、componentWillMount( )
3、render( )
4、componentDidMount( )

上面这些方法的调用是有次序的，由上而下，也就是当说如果你要获取外部数据并加载到组件上，只能在组件"已经"挂载到真实的网页上才能作这事情，其它情况你是加载不到组件的。componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。constructor被调用是在组件准备要挂载的最一开始，所以此时组件尚未挂载到网页上。

componentWillMount方法的调用在constructor之后，在render之前，在这方法里的代码调用setState方法不会触发重渲染，所以它一般不会用来作加载数据之用，它也很少被使用到。一般的从后台(服务器)获取的数据，都会与组件上要用的数据加载有关，所以都在componentDidMount方法里面作。虽然与组件上的数据无关的加载，也可以在constructor里作，但constructor是作组件state初绐化工作，并不是设计来作加载数据这工作的，所以所有有副作用的代码都会集中在componentDidMount方法里。
模板字符串
就传统的 JavaScript 语言，输出模板通常是这样写的。
```
$('#result').append(  
	'There are <b>' + basket.count + '</b> ' +  
	'items in your basket, ' + 
 	'<em>' + basket.onSale +  
	 '</em> are on sale!'
 );
```
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
```
 $('#result').append(`
   	There are <b>${basket.count}</b> 
   	items   in your basket, 
   	<em>${basket.onSale}</em>  
   	are on sale!
   `);
```
如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
```
$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`); 
```
原文：https://blog.csdn.net/fortunegrant/article/details/79534701
组件&prop
https://react.docschina.org/

组件可以将UI切分成一些独立的、可复用的部件，这样就只需专注于构建每一个单独的部件。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。
例如,这段代码会在页面上渲染出”Hello,Sara”:
```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);


	
```