1React是什么
1-1:React开发背景:
1:React是facebook官方推出的JavaScritp库和框架,为解决构建数据不断变化的大型应用。
2:因为数据不断变化所以会导致大量的dom操作,逻辑极其复杂。
3:react通过自动对dom进行操作,开发者只需要告诉React你要展示什么内容,解决大量dom操作的问题,把状态和内容显示的对应起来,这样我们就会知道状态变化,内容会如何变化从而理清程序逻辑。
2react创建组件
2-1:定义组件有两个要求:
1.组件名称必须以大写字母开头
2.组件的返回值只能有一个根元素
2-2react创建组件有两种方式
1:函数组件
import React from 'react'; //引入react模块,这是不可缺少的一步操作
//定义一个React组件
function App() {
return (
<div>
这是一个函数组件
</div>
);
}
export default App;
2:类组件 也叫(class组件)
import React from 'react';
//定义一个React组件
class App extends React.Component{
render(){
return (
<div>
Hello,Reactjs!!
</div>
);
}
}
export default App;
2-3:类组件和函数组件的区别。
- 类组件,有生命周期,有props属性和state属性。是有状态组件。
- 函数组件,没有生命周期,只有props属性。是无状态组件。
- 二者的根本区别在于是否有state属性
3react的属性
3-1:props属性
1.react中说的单向数据流值说的就是props。也可以说props是用来传值的
3-1-1:props的特点
- 每一个组件对象都会有props属性,不论是无状态组件还是有状态组件,都有props属性。
- 组件的标签的所有属性都保存在props里面。
- 可以读取内部的某个属性值。
- 可以通过标签属性,从组件外,向组件内传递数据,(也就是传值)。
- props中的属性值进行类型限制和必要性限制。
这是一个简单的例子
import React from 'react';
import ReactDOM from 'react-dom';
//使用class组件
class User extends React.Component{
render(){
return (
//props属性是不可修改的
<div>{this.props.name}--{this.props.age}</div>
);
}
}
//数据
const person ={
name:'张三',
age:20,
sex:'男'
}
ReactDOM.render(
<User {...person}></User>//{...person}是扩展操作符用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
, document.getElementById('root'));
3-2:state属性
1.React 的核心思想是组件化,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据。
这是一个简单的例子
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
//构造方法
constructor(){
super();
this.state = {
name: 'tom'
}
}
render(){
//state属性是可修改的
this.state.name = 'Mary';
return (
<h1>{this.state.name}</h1>
);
}
}
ReactDOM.render(<Person />, document.getElementById('root'));
4父子组件传值
4-1:父组件向子组件传值
父件代码
import React from 'react';
import Son from './Son';//将子组件导入进来
class Father extends React.Component{
render(){
return (
<React.Fragment>
<Son mess='浅笑' />
</React.Fragment>
)
}
}
export default Father;//向外暴露自己
子组件代码
import React from 'react';
class Son extends React.Component{
render(){
return (
<React.Fragment>
{this.props.mess}//通过props来接收父组件传递过来的内容
</React.Fragment>
)
}
}
export default Son;
入口文件代码
import React from 'react';
import ReactDom from 'react-dom';
import App from './Father'//将父组件导入进来
ReactDom.render(<App />,document.getElementById('root'))//将父组件渲染的内容,通过ID找到元素,让其在页面显示
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
4-2:子组件向父组件传值
子组件通过调用父组件传递到子组件的方法向父组件传递内容的。
父组件代码
import React from 'react';
import Son from './Son';
class Father extends React.Component{
//构造方法
constructor(){
super();
this.state={
message:'' //初始化message的值
}
}
//用于接收子组件的传值方法,参数为子组件传递过来的值
sonMess(msg){
console.log(msg);
//把子组件传递过来的值赋给this.state中的属性
this.state.message=msg;
}
render(){
return (
<React.Fragment>
<Son son={this.sonMess.bind(this)}/>
//sonMess属性名为子组件中调用的父组件方法名 */}
</React.Fragment>
)
}
}
export default Father;
子组件代码
import React from 'react';
class Son extends React.Component{
//通过props属性获取父组件的sonMess方法,并将值传递过去
sonclick(){
this.props.son('这是从Son.js中生成的数据')
}
render(){
return (
<React.Fragment>
<button onClick={this.sonclick.bind(this)}>Son组件中的按钮获取数据</button>
</React.Fragment>
)
}
}
export default Son;
4-3:兄弟组件传值
兄弟之间传值借助的是 子组件->父组件 父组件->子组件,也就是第一个兄弟先把值传给父亲,父亲再把第一个兄弟传过来的值传给第二个兄弟
父组件代码
import React from 'react';
import Son from './Son';
import Son2 from './Son2';
class Father extends React.Component{
constructor(){
super();
this.state={
message:''
}
}
sonMess(msg){
//重新设置一个状态,将传递过来的值赋给message
this.setState({
message:msg
})
console.log("在Father.js中展示Son.js生成的数据:"+msg)
}
render(){
return (
<React.Fragment>
<Son mess='浅笑' son={this.sonMess.bind(this)}/>
<Son2 son2data={this.state.message} />
</React.Fragment>
)
}
}
export default Father;
子组件1 代码
import React from 'react';
class Son extends React.Component{
sonclick(){
this.props.son('这是从Son.js中生成的数据')
}
render(){
return (
<React.Fragment>
<button onClick={this.sonclick.bind(this)}>Son组件中的按钮获取数据</button>
//给按钮botton绑定一个sonclick事件,通过点击事件去传递我们的参数
</React.Fragment>
)
}
}
export default Son;
子组件2 代码
import React from 'react';
class Son2 extends React.Component{
render(){
return (
<React.Fragment>
<h1>
在Son2.js中展示Son.js中生成的数据,这个是Father.js传过来的,数据是:
{this.props.son2data}
</h1>
</React.Fragment>
)
}
}
export default Son2;
结尾
仅个人概述,如有不足和问题,请提出来。