当前位置：首页 > news >正文

REACT (Web开发框架 : react)极速入门

news 来源：原创 2024/9/28 23:02:32

    前面讲过了很多后端，今天复习一下前端，为啥要讲React？对咯！我这边又被借调到前端组了，和前端的同学一起做React，以前有基础加上前端同学只做过Vue，所以我毫无疑问的又被借过去了......，这个是复习资料，高级玩家可略过。

首先我要说一下，有Vue框架和JS原生的同学学习React会特别的快速，所以基础稍微差一点的同学可以先复习一下JS，特别说一下是JS
老生常谈的，说明一下啥是React和React的特点

1.React

起源于 Facebook 的内部项目，用来架设Instagram 的网站。

2.React 特点

        1.声明式设计 −React采用声明范式，可以轻松描述应用。
        2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
        3.灵活 −React可以与已知的库或框架很好地配合。
        4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
        5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
        6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

3.资源引入(自测可用)

<!-- 引入React -->
<script src="https://cdn.staticfile.net/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.net/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.net/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.net/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><!-- 引入Ant Design的JavaScript库 -->
<script src="https://unpkg.com/moment@2.29.1/min/moment.min.js"></script>
<script src="https://unpkg.com/antd@4.16.13/dist/antd.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/antd/3.23.6/antd.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/antd/3.23.6/antd.min.js" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css">

然后说一下我自己的理解：

4.容器

说得直接点就是DOM对象，所有元素都会在DOM对象里面操作，所以首先要声明一个容器（允许动态地访问和更新程序或脚本的内容、结构和www文档的风格）
<div id="example"></div>

5.渲染

前后不分离的都会使用模版引擎来渲染数据，React中使用Rendor来渲染数据（好多后端的框架也是用Rendor关键字来渲染数据）
ReactDOM.render(元素名,document.getElementById('ID名'))

方式一（函数内定义渲染元素）：
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example')//绑定元素
);
</script>方式二（函数外定义渲染元素：
const element = <h1>Hello, world!</h1>;
ReactDOM.render(element,document.getElementById('example')
);

6.函数编程

方式一：
//定义Hello函数
function Hello(props) {return <h1>Hello World!</h1>;
}
//绑定函数
ReactDOM.render(<Hello />, document.getElementById("example"));方式二：
//定义tick函数
function tick() {const element = (<div><h1>Hello, world!</h1><h2>现在是 {new Date().toLocaleTimeString()}.</h2></div>);ReactDOM.render(element,document.getElementById('example'));
}
//tick方法调用
setInterval(tick, 1);

7.类编程

class MessageBox extends React.Component{onClick = ()=>{alert('测试点击成功');}render = ()=>{return ( <div><h1 onClick={this.onClick}>测试数据</h1></div> )}
}ReactDOM.render( <MessageBox/>,document.getElementById('example'),
)

8.JSX

JSX（JavaScript的替代语法：实质还是一样的，只是通过js引入来渲染DOM）
语法：{} 中写对应的逻辑代码

//命名helloworld_react.js 文件
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example')
);//页面引入js
<body><div id="example"></div><script type="text/babel" src="helloworld_react.js"></script>
</body>

9.组件

单一组件（其实实质还是一样的，只是进行了封装和调用，类似与抽象类 + 注入）：

//定义HelloMessage方法
function HelloMessage(props) {return <h1>Hello {props.name}!</h1>;
}//常量引入HelloMessage函数
const element = <HelloMessage name="Runoob"/>;//数据渲染
ReactDOM.render(element,document.getElementById('example')
);复合组件（其实实质还是一样的，只是进行了封装和调用，类似与抽象类 + 注入）：//定义Name方法
function Name(props) {return <h1>网站名称：{props.name}</h1>;
}
//定义Url方法
function Url(props) {return <h1>网站地址：{props.url}</h1>;
}
//定义Nickname方法
function Nickname(props) {return <h1>网站小名：{props.nickname}</h1>;
}//定义App函数
function App() {return (<div><Name name="测试数据" /><Url url="https://www.baidu.com" /><Nickname nickname="baidu" /></div>);
}//数据渲染
ReactDOM.render(<App />,document.getElementById('example')
);

10.关键字：props、state

State (数据存储:相当于一个容器，如果需要根据条件来渲染元素，需要每次都要初始化容器)
Props (传递数据:相当于形参)

function FormattedDate(props) {return <h2>现在是 {props.date.toLocaleTimeString()}</h2>;
}class Clock extends React.Component {//构造函数（类似PHP的构造函数）constructor(props) {super(props);this.state = {date: new Date()};}//挂载componentDidMount() {this.timerID = setInterval(() => this.tick(),1000);}//析构（类似PHP的析构函数，有构造函数就一定要有析构函数）componentWillUnmount() {clearInterval(this.timerID);}tick() {this.setState({date: new Date()});}//返回渲染元素render() {return (<div><h1>my watch</h1><FormattedDate date={this.state.date} /></div>);}
}function App() {return (<div><Clock /><Clock /><Clock /></div>);
}ReactDOM.render(<App />, document.getElementById('time'));

11.事件处理

class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};this.handleClick = this.handleClick.bind(this);}handleClick() {//修改状态（点击后更换相反的状态）this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}
}ReactDOM.render(<Toggle />,document.getElementById('example')
);

12.React 条件渲染

class LoginControl extends React.Component {constructor(props) {super(props);this.handleLoginClick = this.handleLoginClick.bind(this);this.handleLogoutClick = this.handleLogoutClick.bind(this);this.state = {isLoggedIn: false};}handleLoginClick() {this.setState({isLoggedIn: true});}handleLogoutClick() {this.setState({isLoggedIn: false});}render() {const isLoggedIn = this.state.isLoggedIn;let button = null;if (isLoggedIn) {button = <LogoutButton onClick={this.handleLogoutClick} />;} else {button = <LoginButton onClick={this.handleLoginClick} />;}return (<div><Greeting isLoggedIn={isLoggedIn} />{button}</div>);}
}ReactDOM.render(<LoginControl />,document.getElementById('example')
);

13.React 列表(和jquery一样，使用map循环数组数据)


function NumberList(props) {const numbers = props.numbers;const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>);return (<ul>{listItems}</ul>);
}const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />,document.getElementById('example')
);

14.AJAX异步请求数据

class UserGist extends React.Component {constructor(props) {super(props);this.state = {username: '', lastGistUrl: ''};}componentDidMount() {this.serverRequest = $.get(this.props.source, function (result) {var lastGist = result[0];this.setState({username: lastGist.owner.login,lastGistUrl: lastGist.html_url});}.bind(this));}componentWillUnmount() {this.serverRequest.abort();}render() {return (<div>{this.state.username} 用户最新的 Gist 共享地址：<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a></div>);}
}ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists" />,document.getElementById('example')
);

15.表单

class FlavorForm extends React.Component {constructor(props) {super(props);this.state = {value: 'coconut'};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}handleChange(event) {this.setState({value: event.target.value});}handleSubmit(event) {alert('Your favorite flavor is: ' + this.state.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>选择您最喜欢的网站<select value={this.state.value} onChange={this.handleChange}><option value="gg">Google</option><option value="rn">Runoob</option><option value="tb">Taobao</option><option value="fb">Facebook</option></select></label><input type="submit" value="提交" /></form>);}
}ReactDOM.render(<FlavorForm />,document.getElementById('example')
);

16.Antdesign

//初始化
const {Button,Space,Icon,PageHeader} = antd;const dataSource = [{key: '1',name:'姓名1', age: 10, address: '指针1地址',},{key: '2',name:'姓名2', age: 20, address: '指针2地址',},
];
const columns = [{title: '姓名', dataIndex: 'name', key: 'name',},{title: '年龄', dataIndex: 'age', key: 'age',},{title: '住址', dataIndex: 'address', key: 'address',},]//ant按钮
function Buttonclick(){alert('按钮点击测试')
}
ReactDOM.render(<Button type="primary" onClick={Buttonclick}>Ant按钮</Button>,document.getElementById('antbutton'))//ant图标 + 按钮 + 表头 + 表格
function Icons(){return <div><svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024"><path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" /></svg><br /><br /><antd.Button type="dashed">Dashed</antd.Button><br /><br /><antd.Button type="danger">danger</antd.Button><br /><br /><PageHeader className="site-page-header" onBack={() => null} title="Title" subTitle="This is a subtitle"/><antd.Table dataSource={dataSource} columns={columns} /><br /><br /></div>
}
ReactDOM.render(<Icons/>,document.getElementById('anticon'))

17.缓存

localStorage.setItem('mark',1)
localStorage.getItem('mark')
localStorage.clear()

18.代码示例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>React 实例</title><script src="https://cdn.staticfile.net/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.net/react-dom/16.4.0/umd/react-dom.development.js"></script><script src="https://cdn.staticfile.net/babel-standalone/6.26.0/babel.min.js"></script><script src="https://cdn.staticfile.net/jquery/2.1.4/jquery.min.js"></script><!-- 引入React --><script src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><!-- 引入Ant Design的JavaScript库 --><script src="https://unpkg.com/moment@2.29.1/min/moment.min.js"></script><script src="https://unpkg.com/antd@4.16.13/dist/antd.js"></script><link rel="stylesheet" href="https://cdn.staticfile.org/antd/3.23.6/antd.min.css" /><link rel="stylesheet" href="https://cdn.staticfile.org/antd/3.23.6/antd.min.js" /><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css"><!-- 引入js渲染数据 --><script type="text/babel" src="/static/example_jq.js"></script>
</head>
<body style="padding: 2rem"><!--数据渲染开始--><div id="example"></div><br /><br /><div id="example_cla"></div><br /><br /><div id="example_fun"></div><br /><br /><div id="example_pro"></div><br /><br /><div id="example_jq"></div><br /><br /><div id="example_stats_bind"></div><br /><br /><div id="example_arr"></div><br /><br /><div id="example_arrcla"></div><br /><br /><div id="example_asyn"></div><br /><br /><!--数据渲染结束--><!--antdesign组件开始--><div id="antbutton"></div><br /><br /><div id="anticon"></div><br /><br /><!--antdesign组件结束--><script type="text/babel">//--------------------分界线-----------------------------------//简单数据渲染ReactDOM.render(<span>简单数据渲染</span>,document.getElementById('example'));//类渲染(调用类，使用类里面的方法)class ExampleCla extends React.Component{render() { return (<div><span>类渲染</span></div>);}}ReactDOM.render(<ExampleCla/>,document.getElementById('example_cla'));//函数渲染（调用函数，使用函数返回值）function ExampleFun() {return <div><span>函数渲染</span></div>}ReactDOM.render(<ExampleFun/>,document.getElementById('example_fun'))//参数传递：props(只做形参)function ExamplePrp(props){return <div><span>参数传递：{props.name}</span></div>}ReactDOM.render(<ExamplePrp name="传递测试" />,document.getElementById('example_pro'))//状态：State + 事件绑定 + react框架生命周期 + 函数 （元素指定需要用到this,否者对应不到指定的数据）class ExampleStBin extends React.Component{//构造函数constructor(porps) {super(porps);// 调用父类的构造函数（继承后必须声明或者重构）//绑定点击事件this.clickchange = this.clickchange.bind(this)//设置状态this.state = porps.name}//设置函数clickchange(){console.log(this.state)}//挂载函数componentDidMount(){console.log(this.state)}//析构函数componentWillUnmount(){this.state = false;}//元素渲染render() {return (<div onClick={this.clickchange}>状态 + 事件绑定 + react框架生命周期 测试 + 函数</div>);}}ReactDOM.render(<ExampleStBin name="false"/>,document.getElementById('example_stats_bind'))//数组const arr = ['testdata1','testdata2','testdata3','testdata4'];//使用map循环设置数据,函数方法function ExampleArr(props) {const dataarr = props.name//循环数据const datalist = dataarr.map((dataarr) =><li key={dataarr.toString()}>{dataarr}</li>);//渲染数据return <div>{datalist}</div>;}ReactDOM.render(<ExampleArr name={arr}/>,document.getElementById('example_arr'))//数组：使用map循环设置数据,类方法class ExampleArrcla extends React.Component{render() {const items = this.props.names; // 假设从父组件接收一个items数组作为propsreturn (<div><ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul></div>);}}ReactDOM.render(<ExampleArrcla names={arr}/>,document.getElementById('example_arrcla'))//异步请求数据 + localStorage页面缓存class ExampleAsyn extends React.Component {//构造函数constructor(props) {super(props);//初始化容器this.state = {province: '', city: ''};}//挂载componentDidMount() {//操作localstoragelocalStorage.setItem('mark',1)//AJAX请求，post方法，数据格式：jsonthis.httprequest = $.post(this.props.name,{"ip":this.props.ip},function(res){var province = res.provincevar city = res.city//填充容器this.setState({province:province,city:city})}.bind(this),"json");}//析构函数componentWillUnmount(){//终止请求this.httprequest.abort()//localstorage清除localStorage.clear()}//渲染render() {return (<div><span>对应省：{this.state.province}</span><br /><span>对应市：{this.state.city}</span><br /><span>localstorage输出：{localStorage.getItem('mark')}</span></div>);}}ReactDOM.render(<ExampleAsyn name="http://www.xstg.com/test/get_ownership" ip="58.246.191.6"/>,document.getElementById('example_asyn'))//--------------------分界线-----------------------------------//-----------------antdesign组件开始----------------------------//初始化const {Button,Space,Icon,PageHeader} = antd;const dataSource = [{key: '1',name:'姓名1', age: 10, address: '指针1地址',},{key: '2',name:'姓名2', age: 20, address: '指针2地址',},];const columns = [{title: '姓名', dataIndex: 'name', key: 'name',},{title: '年龄', dataIndex: 'age', key: 'age',},{title: '住址', dataIndex: 'address', key: 'address',},]//ant按钮function Buttonclick(){alert('按钮点击测试')}ReactDOM.render(<Button type="primary" onClick={Buttonclick}>Ant按钮</Button>,document.getElementById('antbutton'))//ant图标 + 按钮 + 表头 + 表格function Icons(){return <div><svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024"><path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" /></svg><br /><br /><antd.Button type="dashed">Dashed</antd.Button><br /><br /><antd.Button type="danger">danger</antd.Button><br /><br /><PageHeader className="site-page-header" onBack={() => null} title="Title" subTitle="This is a subtitle"/><antd.Table dataSource={dataSource} columns={columns} /><br /><br /></div>}ReactDOM.render(<Icons/>,document.getElementById('anticon'))//-----------------antdesign组件结束----------------------------</script>
</body>
</html>