react | 自学笔记 | 持续更新

React自学速学笔记

纯小白自学笔记,有不对的欢迎指正。

数据单向流动

  • 单向流动对应的其实就是双向流动。简单理解,就是数据在父子之间的流动方向。单向流动,表示数据由父流向子组件,双向就是父子之间都可以流动。
  • 但是这个单向流动是不是只能由父流向子,子组件无法改变父组件的东西呢?不是的,只是说一个设计理念而已。
  • 学过angular的话,会知道,在angualr中,可以通过@input/@output实现数据的双向流动。react中,则是通过prop实现单向流动。区别在哪儿?假设父组件要向子组件传递一个变量名为age,值为1的变量。在angular中,结构大概是
html 复制代码
<--Parent.html->
<app-child [(v)]=age></app-child>

当你在child组件中更改age变量之后,parent中的age也会跟着被改变;而在react中,大概是

javascript 复制代码
function Parent(){
    let age=1;
	return (
		<div>
			<Child v={age}>
		</div>
	)
}

当你在Child中更改之后,Parent中的age是不会跟着改变的。而且,也要注意,prop对象是只读的。当然也是有其他方法在react中实现双向通信的,回头再说。

事件

  • 注意语法 onClick 而不是 onclick

为什么上述例子,是onClick={()=>shoot("goal!")}而不是onClick{shoot("goal")}?

  • 学过angular的知道,写事件的时候,是带括号的: (click)=shoot("goal")
  • react中: 不带参数: onClick={shoot}; 带参数 onClick={()=>shoot("goal")};容易看出,带参数,用匿名函数包了一层。原因就是,在react中,和js一样,你写()了,就代表函数执行了。也就是,你可以这么写onClick={shoot("goal")};只是说,这么些,不用等到用户点击按钮,组件加载的时候就执行了。 其实,拿onClick事件举例子,你在屏幕上点击了,react就会自动加一个括号,执行相关的函数,所以我们想要传递其他参数的时候,需要用匿名函数包裹一下,相当于点击之后会执行这个匿名函数,里面的函数就跟着执行了呗;实在不懂,你就看这个例子

event对象

其实就这个结构onClick={(e)=>fun(e)};实际上你只能在匿名函数中传递e,要么你别传,要传就只能传e;否则就会报错
假设多传递了,就会报错。所以你可以改成

javascript 复制代码
onClick={(e)=>foo(e,otherParams)}

条件渲染

在angular中也会有条件渲染的场景,一般可能借助以下的语法糖来完成

html 复制代码
*ngIf *ngSwitch *ngTemplateOutlet

react中也有常见的方法

  • if
  • &&
  • ?:
javascript 复制代码
function App() {
}

// 直接在App文件中写下面的jsx,模拟从其他文件引用两个不同组件
let C1 = () => (<div>component 1</div>);
let C2 = () => (<div>component 2</div>);

export default App;

if方法

javascript 复制代码
function App() {
    let displayC1 = true;
    if (displayC1) {
        return <C1></C1>;
    } else {
        return <C2></C2>
    }
}


// 模拟从其他文件引用两个不同组件
let C1 = () => (<div>component 1</div>);
let C2 = () => (<div>component 2</div>);

export default App;

&&

这个巧妙点就在于a&&b:a为真才去执行b,a为假,就不会去执行b了。

应用在react中be like:

javascript 复制代码
function App() {
    let displayC1 = true;
    return (
        /*displayC1为真,以下只会显示C1*/
        <div>
            {displayC1 && <C1/>}
            {!displayC1 && <C2/>}
        </div>
    );
}


// 模拟从其他文件引用两个不同组件
let C1 = () => (<div>component 1</div>);
let C2 = () => (<div>component 2</div>);

export default App;

?: 三元表达式

javascript 复制代码
function App() {
    let displayC1 = true;
    return (
        <div>
            {displayC1 ? <C1/> : <C2/>}
        </div>
    );
}


// 模拟从其他文件引用两个不同组件
let C1 = () => (<div>component 1</div>);
let C2 = () => (<div>component 2</div>);

export default App;
相关推荐
crary,记忆1 天前
微前端 - Module Federation使用完整示例
前端·react·angular
aiguangyuan1 天前
浅谈 React Hooks
react·前端开发
whatever who cares3 天前
React hook之userReducer
react.js·react
aiguangyuan3 天前
React Hooks 基础指南
react·前端开发
aiguangyuan4 天前
React 项目初始化与搭建指南
react·前端开发
aiguangyuan4 天前
React 组件异常捕获机制详解
react·前端开发
aiguangyuan4 天前
深入理解 JSX:React 的核心语法
react·前端开发
aiguangyuan5 天前
React 基础语法
react·前端开发
aiguangyuan6 天前
React 核心概念与生态系统
react·前端开发
aiguangyuan6 天前
React 18 生命周期详解与并发模式下的变化
react·前端开发