react初学

最新推荐文章于 2024-04-30 23:41:28 发布

沐音_000

最新推荐文章于 2024-04-30 23:41:28 发布

阅读量220

点赞数

分类专栏： react.js

本文链接：https://blog.csdn.net/Yvonne_Lu7/article/details/83744900

版权

react.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考自：http://www.runoob.com/react/react-jsx.html

1.React JSX

React使用JSX来代替常规的JavaScript.

JSX是一个看起来很像XML的js语法扩展。

JSX优点：①JSX执行更快，因为它在编译为js代码后进行了优化；

②它是类型安全的，在编译过程中就能发现错误；

③使用JSX编写模板更加简单快速

实际上，JSX是一种语法糖，它替代了React.createElement()方法

返回的是ReactElement对象。

2.在JSX中不能使用if else语句，但是可以使用conditional(三元运算)表达式来替代。

即表达式？结果一：结果二

3.react推荐使用内联样式。我们可以使用camelCase语法来设置内联样式。react会在指定元素后自动添加px

4.注释需要写在花括号中：

{/*注释。。。*/}

5.jsx允许在模板中插入数组，数组会自动展开所有成员

eg:

var arr = [

<h2>lallala</h2>

];

ReactDOM.reader(

<div>{arr}</arr>,

document.getElementById('test')

);

6.原生HTML元素名以小写字母开头，而自定义的React类名以大写字母开头。除此之外还需要注意组件类只能包含一个顶层标签。

7.如果我们需要向组件传递参数，可以使用this.props对象eg:

function Hello(props){
    return <h1>Hello{props.name}!</h1>;
}

const element = <Hello name = "world" />;

ReactDOM.render(
    element,
    document.getElementById('example')
);

注意：在添加属性时，class属性需要写成className,for属性需要写成htmlFor，这是因为name和for是js的保留字

8.可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

以下实例实现了输出网站名字和网址的组件：

function Name(props){
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props){
    return <h1>网站地址：{props.url}</h1>;
}
function App(){
    return (
    <div>
        <Name name = "百度" />
        <Url url = "www.baidu.com">
    </div>
    );
}

ReactDOM.render(
    <App />,
    document.getElementById('example')
);

9.react的状态

React把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。

React里，只需要更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）。

10.数据自顶向下流动：

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。这就是为什么状态通常被称为局部或封装。除了拥有并设置它的组件外，其他组件不可访问。

这通常被称为自顶向下或单向数据流。任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或UI只能影响树中下方的组件。

11.React Props

props(属性)：组件像一个函数一样，接收特定的输入（props），产出特定的输出（React elements）.

类比为：V = F(props)

属性可以支持多种数据类型。

state和props主要的区别在于props是不可变的，而state可以根据与用户交互来改变。这就是为什么有些容器组件需要定义state来更新和修改数据，而子组件只能通过props来传递数据

React 基于状态实现对DOM控制和渲染。组件状态分为两种：一种是组件间的状态传递、另一种是组件的内部状态，这两种状态使用props和state表示。props用于从父组件到子组件的数据传递。组件内部也有自己的状态：state，这些状态只能在组件内部修改。