React基本语法

淡淡的烟草味﹌ 2021-09-15 12:06 281阅读 0赞

一.JSX

1.什么是JSX

JSX 是 JavaScrip 的一种扩展语法。JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。

下面就是jsx的语法

2.JSX的特点：  
A.类XML语法容易接受，结构清晰  
B.增强JS语义  
C.抽象程度高，屏蔽DOM操作，跨平台

D.代码模块化

3.基本语法

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 \{ 开头），就用 JavaScript 规则解析。不加引用 （加引号就会被当成字符串）

var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') ); 这个就是一个简单的html与js混用的例子。arr变量中存在html元素，div中又使用了arr这个js变量。转化成纯javascript的话：

(1).指定属性值

A.使用双引号来指定字符串字面量作为属性值

const element = <div tabIndex="0"></div>;

B.花括号嵌入一个 JavaScript 表达式作为属性值

const element = <img src=\{user.avatarUrl\}></img>;

(2).注释

在 JSX 里使用注释也很简单，就是沿用 JavaScript，唯一要注意的是在一个组件的子元素位置使用注释要用 `{}` 包起来。

(3).支持的标签和属性

在React中，所有DOM属性和属性（包括事件处理程序）都应该是camelCased的。例如，**HTML属性tabindex对应tabIndex于React中的属性。唯一的例外是aria-\*和data-\*属性，应小写。例如，你可以继续aria-label作为aria-label**。

1.class命名： React DOM 使用驼峰(camelCase)属性命名约定, 而不是HTML属性名称。

例如，**class 在JSX中变为className，tabindex 变为 tabIndex**。

2.样式设置

React会自动将“px”后缀附加到某些数字内联样式属性。如果您想使用“px”以外的单位，请将该值指定为具有所需单位的字符串。例如：

// Result style: '10px' <div style={ { height: 10 }}> Hello World! </div> // Result style: '10%' <div style={ { height: '10%' }}> Hello World! </div>

[参考官网][Link 1]

二.组件

(1).组件继承+组合

A.组合

import React from 'react'; class App extends React.Component { render() { const user = '丫丫'; const ProfilePic1 = (props) => { return ( <div>组合1：{props.username}</div> ); }; const ProfilePic2 = (props) => { return ( <div>组合2：{props.username}</div> ); }; return ( <div> <h1>Hello, {user}!</h1> <ProfilePic1 username="组件小妹1"/> <ProfilePic2 username="组件小妹2"/> </div> ); } }

![20180530150207395][]

B.继承

注意：return 要加div来包裹组件

import React from 'react'; class App extends React.Component { render() { function formatName(user) { return user.firstName + user.lastName; } const user = { firstName: '刘', lastName: '小车' }; return ( <div> <h1>Hello, {formatName(user)}!</h1> <Childdiv></Childdiv> </div> ); } } class Childdiv extends React.Component { render() { const name='丽丽' return ( <div>我是{name}</div> ); } } export default App;

注意：

组件标签里面包含的子元素会通过 props.children 传递进来 ：this.props.children

import React from 'react'; class App extends React.Component { render() { const user = '丫丫'; const Parent = (props) =>{ return ( <div>组件标签里面包含的子元素:{props.username}{props.children}</div> ); }; return ( <div> <h1>Hello, {user}!</h1> <Parent username="hello"><span>props.children</span></Parent> </div> ); } }

![20180530151654694][]

(2).props 组件之间传递数据

使用：<组件 数据="值"></组件>的形式传递

组件之间：使用this.props获取值  
如果组件只有render函数，还可以用函数形式写组件

import React from 'react'; class App extends React.Component { render() { const user = '丫丫' return ( <div> <h1>Hello, {user}!</h1> <Childdiv name="丽丽"></Childdiv> <Welcome name="徐晓高"></Welcome> </div> ); } } function Welcome(props) { return <h1>用函数形式写组件,{props.name}</h1>; } //组件之间的传值：{this.props.name} class Childdiv extends React.Component { render() { return ( <div>我是{this.props.name}</div> ); } } export default App;

![20180528164055287][]

补充：

无论你用函数或类的方法来声明组件, 它都无法修改其自身 props. 思考下列 sum (求和)函数:

function sum(a, b) { return a + b; }

这种函数称为 [“纯函数”][Link 2] ，因为它们不会试图改变它们的输入，并且对于同样的输入,始终可以得到相同的结果。

以下是非纯函数， 因为它改变了自身的输入值：

function withdraw(account, amount) { account.total -= amount; }

注意：

**所有 React 组件都必须是纯函数，并禁止修改其自身 props** 。

当然， 应用 UI 总是动态的，并且随时有可以改变。 state 允许 React 组件在不违反上述规则的情况下, 根据用户操作, 网络响应, 或者其他随便什么东西, 来动态地改变其输出。

(3).组件内部state(项目管理状态)

A.特点：

a.JSX本质就是js,所以直接数组.map渲染列表

b.constructor设置出事状态，记得执行super(props)

c.如state就是一个不可变的对象，使用this.state获取

import React from 'react'; class App extends React.Component { render() { const user = '丫丫'; return ( <div> <h1>Hello, {user}!</h1> <Childdiv name="丽丽"></Childdiv> </div> ); } } //组件之间的传值：{this.props.name} class Childdiv extends React.Component { //添加一个 类构造函数(class constructor) 初始化 this.state constructor(props){ super(props); this.state={ solders:['苹果','梨','香蕉'] } } render() { return ( <div> <div>我是{this.props.name},我有以下这些水果：</div> <ul> {this.state.solders.map(v=>{ return <li key={v}>{v}</li> })} </ul> </div> ); } } export default App;

![20180528164921792][]

注意：渲染列表ul的时候，li要有key

(4).生命周期

React组件有若干钩子函数，在组件不同的状态执行  
a.初始化周期  
b.组件重新渲染生命周期  
c.组件卸载声明周期

![20180528172239864][]

//组件之间的传值：{this.props.name} class Childdiv extends React.Component { //构造函数 constructor(props){ super(props); this.state={ solders:['苹果','梨','香蕉'] } } //生命周期函数 render 之前调用 ：在这个方法里面调用 setState 改变状态 componentWillMount() { console.log('组件马上就要加载了。。') } //生命周期函数 render之后调用：这里可以获取组件的DOM节点 componentDidMount() { console.log('组件加载完毕！') } render() { console.log('组件正在加载了。。') return ( <div> <div>我是{this.props.name},我有以下这些水果：</div> <ul> {this.state.solders.map(v=>{ return <li key={v}>{v}</li> })} </ul> </div> ); } }

![20180528173141127][]

(5).处理事件

1.实例

通过 React 元素处理事件跟在 DOM 元素上处理事件非常相似。但是有一些语法上的区别：  
a.React 事件使用驼峰命名，而不是全部小写。  
b.通过 JSX , 你传递一个函数作为事件处理程序，而不是一个字符串。

如onClick点击事件:  
   a.JSX里,onClick=\{this.函数名\}来绑定事件  
   b.**this引用的问题，需要在构造函数里用bind绑定this**

c.this.setState修改state，记得返回新的state，而不是修改

import React from 'react'; class App extends React.Component { render() { const user = '丫丫'; return ( <div> <h1>Hello, {user}!</h1> <Childdiv name="丽丽"></Childdiv> </div> ); } } //组件之间的传值：{this.props.name} class Childdiv extends React.Component { //构造函数 constructor(props){ super(props); this.state={ solders:['苹果','梨','香蕉'] } this.addfruits = this.addfruits.bind(this) } addfruits(){ this.setState({ solders:[...this.state.solders,'凤梨'+ Math.random()] }) } render() { return ( <div> <div>我是{this.props.name},我有以下这些水果：</div> <button onClick={this.addfruits}>添加水果</button> <ul> {this.state.solders.map(v=>{ return <li key={v}>{v}</li> })} </ul> </div> ); } } export default App;

![20180528171144544][]

注意要显式调用 `bind(this)` 将事件函数上下文绑定要组件实例上，这也是 React 推崇的原则：没有黑科技，尽量使用显式的容易理解的 JavaScript 代码。

注意：this的问题 除了this.addfruits = this.addfruits.bind(this)或<button onClick=\{this.addfruits.bind(this)\}>添加水果</button>的解决方式，还有如下

这里使用箭头函数：<button onClick=\{()=>this.addfruits()\}>添加水果</button>

2.参数传递

给事件处理函数传递额外参数的方式：bind(this, arg1, arg2, ...)

addfruits(param, event){ this.setState({ solders:[...this.state.solders,param+ Math.random()] }) } render() { return ( <div> <div>我是{this.props.name},我有以下这些水果：</div> <button onClick={this.addfruits.bind(this,'凤梨')}>添加水果</button> <ul> {this.state.solders.map(v=>{ return <li key={v}>{v}</li> })} </ul> </div> ); }

效果同上

[React 支持的事件列表][React]

(6).DOM的操作

React 操作DOM元素的两种方式

1. 使用选择器

var Btn = document.getElementById('btn') ReactDom.findDOMNode(Btn).style.color = 'red'

2. 使用ref

在标签内使用ref='btn' this.refs.btn.style.color = 'red'

Refs 是访问到组件内部DOM节点唯一可靠的方法   
注意：a.不要在 render 或者 render 之前访问 refs，可以在 componentDidMount函数中使用  
b.不要滥用 refs，比如只是用它来按照传统的方式操作界面 UI：找到 DOM -> 更新 DOM

(7).mixin

Mixin 就是用来定义一些方法，使用这个 mixin 的组件能够自由的使用这些方法（就像在组件中定义的一样），所以 mixin 相当于组件的一个扩展，在 mixin 中也能定义“生命周期”方法。

React 的 mixins 的强大之处在于，如果一个组件使用了多个 mixins，其中几个 mixins 定义了相同的“生命周期方法”，这些方法会在组件相应的方法执行完之后按 mixins 指定的数组顺序执行。

三.Data Flow

Data Flow 只是一种应用架构的方式，比如数据如何存放，如何更改数据，如何通知数据更改等等，所以它不是 React 提供的额外的什么新功能，可以看成是使用 React 构建大型应用的一种最佳实践。

这里主要关注两种实现：

官方的 Flux 和 更优雅的 Redux

[Link 1]: https://reactjs.org/docs/dom-elements.html
[20180530150207395]: /images/20210813/dc6079a44b864a23a37b458ec74287f7.png
[20180530151654694]: /images/20210813/4ddafce83657416cabdbfdc6ca422ed9.png
[20180528164055287]: /images/20210813/6415d8b5bba9477abe212a1c24e1c32e.png
[Link 2]: https://en.wikipedia.org/wiki/Pure_function
[20180528164921792]: /images/20210813/237e85bdc2f14dffb32851296a0c796b.png
[20180528172239864]: /images/20210813/57e5fc3bdd6c4d89b9fd4ae31ab956fb.png
[20180528173141127]: /images/20210813/720ea633f8094a80ac2cd7db6debfc32.png
[20180528171144544]: /images/20210813/e705cff4303f401a8e73102d9ef3ffb7.png
[React]: http://facebook.github.io/react/docs/events.html