react | 自学笔记 | 持续更新

React自学速学笔记

数据单向流动
事件
- 为什么上述例子，是onClick={()=>shoot("goal!")}而不是onClick{shoot("goal")}?
- event对象
条件渲染
- if方法
- &&
- [?: 三元表达式](#?: 三元表达式)

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

数据单向流动

单向流动对应的其实就是双向流动。简单理解，就是数据在父子之间的流动方向。单向流动，表示数据由父流向子组件，双向就是父子之间都可以流动。
但是这个单向流动是不是只能由父流向子，子组件无法改变父组件的东西呢？不是的，只是说一个设计理念而已。
学过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;