亲宝软件园·资讯

展开

React组件化

小余努力搬砖 人气:0

模块化

模块

理解:向外提供特定功能的js程序,一般就是一个js文件。

为什么:要拆成模块,随着业务逻辑增加,代码越来越多且复杂。

作用:复用js,简化js的编写,提高js运行效率。

模块化

当应用的js都以模块来编写,这个应用就是一个模块化的应用

组件化

组件

理解:用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)

为什么:要用组件,一个界面的功能复杂

作用:复用编码,简化项目编码,提高运行效率

组件化

当应用是以多组件的方式实现,这个应用就是组件化的应用

函数式组件

实质:一个 React 应用就是构建在 React 组件之上的。

函数组件:该函数是一个有效的 React 组件,因为它接收唯一带有数据的 “​props​”(代表属性)对象与并返回一个 React 元素。这类组件被称为“函数组件”,因为它本质上就是 JavaScript 函数。

创建函数组件

function HelloPerson(){
 return <h1>你好,我是函数式组件!</h1>;
 
}
ReactDOM.render(<HelloPerson/>,document.getElementById('root'));

说明:解析组件标签HelloPerson,发现组件是函数定义的,调用该函数,将返回的虚拟DOM,转为真实的DOM,随后呈现在页面上。

Props参数传递(重点)

function HelloPerson(person){
      console.log(this);//此处undefined babel编译后采取严格模式
  return (
  <ul>
  <li>姓名:{person.name}</li>
  <li>年龄:{person.age}</li>
  </ul>
  )
 }
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('root'));

复合函数组件

 function GetName(props){
 return <li>姓名:{props.name}</li>
 }
 function GetAge(props){
 return <li>年龄:{props.age}</li>
 }
function HelloPerson(person){
 return (
 <ul>
 <GetName name={person.name}/>
 <GetAge age={person.age}/>
 </ul>
  )
  }
ReactDOM.render(<HelloPerson name='张三' age={18}/>,document.getElementById('root'));

类式组件

ES6 的 class 来定义组件,通过继承React.Component。解析流程如下:

React解析组件标签,找到了MyComponent组件。

发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。

将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。

创建实例

//创建类组件 1:继承react中的Component类 2:需要render
class Person extends React.Component{
 render(){
 return (
     <h1>你好,我是类式组件!</h1>
 )
 }
}
ReactDOM.render(<Person/>,document.getElementById("root"));

用户自定义组件

const element = <Person/>
ReactDOM.render(element,document.getElementById("root"));

加载全部内容

相关教程
猜你喜欢
用户评论