废话
有的人会很懵逼把,为什么我想学习 Ant Design Pro,却来学习 React,这是因为 Ant Design Pro 作为开箱即用的中台框架,你需要有 React 基础,因为里面全 TM 是 JS 或者 TS(typeScript),如果有 React 基础的请跳过 React 教学部分。
PS:本文不会对 React 展开全部叙述,只是对部分东西进行学习,达到能够上手 AntD 做准备
如果想好好学习 React 可以看一下 React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)
React 是什么
在 React 官网文档是这样说的:
React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。
在菜鸟教程中可以看到
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
React 特点:
简洁、高效、灵活、JSX 格式、组件复用、相应流
开始
接下来以 WebStorm 为例:
- 创建项目
注意:项目名字只能是小写,不能大小写混合
- 等待加载
- 加载结束、运行项目
- 访问项目:
到这里你已经成功创建项目
- 打开 src 目录,保留 index.js 文件,删除其余文件
- 在 index.js 内写 HelloWorld
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>hello world</h1>, document.getElementById('root') );
其中 documet.getElementById('root')是获取 public 文件夹下的 index.html 文件中 id 为 root 的节点
- 查看效果
接下来你就可以开始学习 React 了。
React 渲染
在刚刚的例子中,我们看到,在 ReactDOM.render 中的 helloworld 被渲染出来了,此时我们记住,ReactDOM.render 是用来渲染的, 它将对应的元素插入到相应的节点中。
在刚刚例子中,public 目录下有 index.html 文件,文件中有 id 为 root 的节点,所以 < h1 > 就被渲染到对应的节点中去了。
接下来我们在刚刚基础上变形,将 index.js 文件改为以下内容
import React from 'react'; import ReactDOM from 'react-dom'; const element = <h1 >this is a demo</h1>; ReactDOM.render( element, document.getElementById('root') );
注意:在 react 中插入元素,不允许存在同级标签,以下是错误的
接下来再来感受两个例子:
import React from 'react'; import ReactDOM from 'react-dom'; function tick() { const element = ( <div> <h1>nowtime:</h1> <h2> {new Date().getTime()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 100);
import React from 'react'; import ReactDOM from 'react-dom'; function tick() { const element = ( <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 100);
组件
在 React 中组件是很重要的一部分,为了简化代码,就出现组件复用的概念,接下来看一下这个 demo,明白一下组件是啥
import React from 'react'; import ReactDOM from 'react-dom'; function Hello() { return <h1>Hello World!</h1>; } const element = <Hello />; ReactDOM.render( element, document.getElementById('root') );
注意看标签 Hello 标签,其实这个标签是不存在的,是我们自定义的,因此可以把组件简单理解为自定义标签
注意:自定义标签首字符一定要大写,一定要大写,Hello 不能写成小写的 hello,因为 html 原生标签是小写字母开头的,为了识别出来,自定义的标签一定要大写
然后在来看看下面例子加深印象
import React from 'react'; import ReactDOM from 'react-dom'; function Name() { return <h1>姓名:sirwsl</h1>; } function Age(){ return <h1>年龄:24</h1> } function Sex(){ return <h1>性别:男</h1> } ReactDOM.render( <div> <Name /> <Age /> <Sex /> </div>, document.getElementById('root') );
这时候我们会想要是我想让上面相关的变量不写死怎么办呢?
import React from 'react'; import ReactDOM from 'react-dom'; function Name(props) { return <h1>姓名:{props.name}</h1>; } function Age(props){ return <h1>年龄:{props.age}</h1> } function Sex(props){ return <h1>性别:{props.temp}</h1> } ReactDOM.render( <div> <Name name='sirwsl'/> <Age age='24'/> <Sex temp= '男'/> </div>, document.getElementById('root') );
类
我们看一下下面的例子:
import React from 'react'; import ReactDOM from 'react-dom'; class Index extends React.Component{ //构造器 constructor() { super(); this.state = {count : 0}; } render() { return <h1>count:{this.state.count}</h1> } } ReactDOM.render( <Index />, document.getElementById('root') );
在这个例子中我们看到开始出现像 JAVA 一样的 class 与 extends 关键字,结构和 java 也很类似。
constructor 是构造器,初始化的数据一般都在这,render()是将这个类中所有要渲染的东西都放在这里渲染、返回。
State 与 Props
react 其实就是这样,接下来我们在看 State 与 Props 时,我们先看个例子·
import React from 'react'; import ReactDOM from 'react-dom'; class Index extends React.Component{ //构造器 constructor(props) { super(props); this.state = {count: 0}; //绑定事件,一般来说onClick都需要有bind this.add = this.add.bind(this); this.inc = this.inc.bind(this); } add(){ this.setState({count:this.state.count+1}); } inc(){ this.setState({count:this.state.count-1}); } render() { return <> <button onClick={this.add}>点击+1</button> <button onClick={this.inc}>点击-1</button> <h1>count:{this.state.count}</h1> </> } } ReactDOM.render( <Index />, document.getElementById('root') );
这里我看看到开始引入了 state,如果对于学过 java 或者 C#之类的人来说,state 的作用其实就是定义变量,就相当于 java 中的类的私有变量,在本类中提供给其他方法使用的,也就是在类中是共享的。
import React from 'react'; import ReactDOM from 'react-dom'; class Index extends React.Component { constructor() { super(); } render() { return <> <h2>我是Index(父亲)要给儿子传值</h2> <Demo value = {123} /> </> } } class Demo extends React.Component{ constructor(props) { super(props); this.state = {indexValue:this.props.value}; } render() { return <> <h1>这是父亲给我的值:{this.state.indexValue}</h1> </> } } ReactDOM.render( <Index />, document.getElementById('root') );
在上面的例子中我们看到,父亲 Index 调用 Demo,在调用的时候给了儿子一个值‘123’,儿子通过 props 获取到爹给值,然后显示了出来。
从两个例子中大概归纳一下就是:
state 组件内的调用,类似组件内共享数据
props 是父子组件之间调用,子组件获取父组件的值
再来看一组例子加深一下印象:
import React from 'react'; import ReactDOM from 'react-dom'; class WebSite extends React.Component { constructor() { super(); this.state = { name: "sirwsl", site: "https://www.wslhome.top" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } ReactDOM.render( <WebSite />, document.getElementById('root') );
写不动了,收拾回宿舍了,内容看下一篇
相关链接
上一篇:👀
下一篇:👀
Ant Design Pro 系列:👀
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于