React 学习第二天 2018-07-21

React 学习第二天

我这个React 学习存在以下毛病

1.不报错，

2.不能自动热加载，不能自动刷新

3.不能修改props 属性的值，但是这个却能够修改。

1.Vue 和React的关于 key 的区别

1.1 使用v-for 和map 的时候，尽量使用key 进行绑定，否则会产生相关的紊乱。

1.2 react 中，在进行forEach 循环/for 循环/ map 时，需要添加 key 给相关控制的元素。

数组的forEach 和数组的 map 方法。

forEach 遍历每一项，然后进行相关的操作，

map 遍历每一项，然后生成一个新的数组，会有返回值，需要接收。

//方案一，数组的forEach 方法

arrStr.forEach(item =>{

const temp = <h5 key={item}>{item}</h5>

nameStr.push(temp);

})

//方案二，数组的map 方法,map 中必须写return

const result = arrStr.map(item => {

return item+ '---'

});

console.log(result);

2.JSX 语法中的注释。

{/* 这个是注释一*/}

{

//这个是注释二

}

还有就是 class===》》》className

for -->>> htmlFor

//假设main.js 是入口文件，

console.log('01--假设这个是初始化文件');

//1.导入包名。

import React from 'react' //创建组件，创建虚拟DOM，生命周期的相关，

import ReactDOM from 'react-dom' //渲染到页面展示相关，

//2. 创建虚拟的DOM 元素，

//第一个参数，创建元素的标签类型，

//第二个参数是节点的属性，

//第三个参数是标签的子元素，或者内容

// const h1= React.createElement('h1',{id : 'h1',title :'h'},'这个想试图创建一个H1');

// // const mydiv = React.createElement('div',null,'这个是div 元素',h1);

// const div1 = <div>这个是一个div

// <h1 >这个是h1</h1>

// </div>

//3.把虚拟DOM 渲染到页面上。

//第一个参数，渲染谁，

//第二个参数，渲染的容器，

let a = 10 ///等价于 const a = 10

let str = '您好，刘送杰同学';

const h1 = <h1>这个是一h1</h1>

const arr = [

<h1>第一个</h1>,

];

let arrStr = ['柯南','毛利小五郎','毛利小可爱','小柯南'];

const nameStr = [];

//方案一，数组的forEach 方法

arrStr.forEach(item =>{

const temp = <h5 key={item}>{item}</h5>

nameStr.push(temp);

})

//方案二，数组的map 方法,map 中必须写return

const result = arrStr.map(item => {

return item+ '---'

});

//console.log(result);

ReactDOM.render(<div>

{a}--<hr/>{str}

<hr/>{h1}

{/* 这个是注释*/}

{

//这个是注释

}

<hr/>

{arr}

<hr/>

{nameStr}

<hr/>

{arrStr.map(item => {

return <h3 key={item}>{item}</h3>

})}

<hr/>

</div>,document.getElementById('app'))

//上面这个方式比较复杂，不人性化

//const h11= <div>这个是一个div</div>，但是不能解析，需要相关的包，需要使用bable 进行转换。

3.React 中创建组件的方式

3.1 第一种

第一步，创建

function Hello (){

//如果在一个组件中return 一个null，表示空组建，什么都不渲染，

//return null;

//这种以对象或者函数的方式创建的组件，必须返回一些内容，实在不行，也要返回

//一个空内容

//使用的时候，/*将组件的名称，直接以标签的形式丢到页面上即可*/

return <h1>返回一个h1</h1>;

}

第二步，传递数据，

定义好数据，const dog =｛｝

先在<Hello name={dog.name}></Hello>，通过属性进行传递传递数据

然后在组件内部取，props.name props.age

//构造函数中接收外在函数传递的数值。

function Hello (props){

//如果在一个组件中return 一个null，表示空组建，什么都不渲染，

//return null;

//这种以对象或者函数的方式创建的组件，必须返回一些内容，实在不行，也要返回

//一个空内容

//使用的时候，/*将组件的名称，直接以标签的形式丢到页面上即可*/

console.log(props);

props.testage =15; //试图赋值--视频老师说无法赋值，但是我成功了。

props.testcolor = '白色'

return <div>返回一个h11111--{props.testage}--{props.testcolor}</div>;

}

const dog ={

age : 123,

name : '大黄',

color :'黄色'

}

ReactDOM.render(<div>

{/*将组件的名称，直接以标签的形式丢到页面上即可*/}

</div>,document.getElementById('app'));

上；述方式的缺点：就是传递属性的个数有限，如果传递多个，写起来不好看

使用ES6的展开运算符简化传递props数据的过程04.使用ES6的展开运算符简化传递props数据的过程

新方法：<Hello {...dog}></Hello>

以三个... 展开运算符，将某一个对象的值展开给其他的对象使用

const o2 = {

name : '大黄',

...o1

}

4. 组件的首字母名称必须大写

5.创建组件的第二种方式，将组件抽离为单独的文件

第一步，单独抽取出来，

import React from 'react' //第一步，必须

//创建组件的第二种方式，

//抽取出来，放到 .jsx 中

function Hello (props){

//如果在一个组件中return 一个null，表示空组建，什么都不渲染，

//return null;

//这种以对象或者函数的方式创建的组件，必须返回一些内容，实在不行，也要返回

//一个空内容

//使用的时候，/*将组件的名称，直接以标签的形式丢到页面上即可*/

console.log(props);

props.testage =15; //试图赋值

props.testcolor = '白色'

return <div>返回一个h11111--{props.testage}--{props.testcolor}</div>;

}

//然后暴露出去，

export default Hello //暴露也是必须的

第二步，在需要的index.js 等文件中进行导入。

import Hello from './components/Hello.jsx

6..配置webpack从而在导入组件的时候，省略.jsx后缀名

在webpack.config.js 中进行相关配置，增加一个resolve 节点，配置，extensions 属性

resolve :{

extensions :['.js','.jsx','.json'] //表示这几个文件的后缀名，可以省略不写，

}

7. 通过 alias 配置相关别名。

8.使用class 的相关学习

8.1 创建类，

8.2 实例属性（构造器中），静态属性（类上）， ---静态的实例访问不到

8.3 实例方法，（挂载是原型实例上的）静态方法（挂载在构造函数中的）

9.继承的学习，构造器，extends ， super 等的学习

11.基于class 关键字的创建组件

//1.继承React.Component //2.返回一个JSX 虚拟DOM结构

class 组件名称　extends React.Component {

render (){

return <div>这个是由class 关键字创建的组件</div>

}

//使用class 关键字创建组件

class Movie extends React.Component{

//render 函数的作用，渲染当前组件对应的虚拟DOM结构

render(){

//这里必须返回一个JSX 虚拟DOM结构

//return null;

return <div>test DIV　</div>

}

传递值：也是有两种方式，

//学习 React 中创建组件

import React from 'react'

import ReactDOM from 'react-dom'

// import './components/Test.js'

//使用class 关键字创建组件

class Movie extends React.Component{

//render 函数的作用，渲染当前组件对应的虚拟DOM结构

render(){

//这里必须返回一个JSX 虚拟DOM结构

//return null;

return <div>test DIV 组件　

{this.props.name} --{this.props.time}

{/* class 创建的组件中，直接使用this.props.name 调用就行。 */}

</div>

}

const dianying = {

name : '我不是妖神',

time : 120

}

ReactDOM.render(<div>

{/*将组件的名称，直接以标签的形式丢到页面上即可*/}

{/* <Movie name={dianying.name} time={dianying.time}></Movie>*/}

</div>,document.getElementById('app'));

12.class 创建的组件的 function 创建的组件的区别

12.1 使用class 关键字创建的组件，有自己的私有数据和生命周期函数，

12.2 function 创建的组件，只有通过外界传递的props ，没有自己的私有数据和生命周期函数。

12.3 class 创建的叫做有状态组件，function 创建的叫做无状态组件，本质区别就是有无state 属性和生命周期函数。

12.4 如果一个组件需要有自己的私有数据，推荐使用class 创建组件，如果一个组件不需要私有数据，则推荐使用无状态组件。

12.5 props 是不可修改的，state的是可以修改的

//学习 React 中创建组件

import React from 'react'

import ReactDOM from 'react-dom'

// import './components/Test.js'

//使用class 关键字创建组件

class Movie extends React.Component{

constructor(){

//由于Movie 组件集成了React.Component 父类，因此需要调用super，

super();

this.state = {

msg : '大家好，这个是自己的私有数据哦！'

} //相当于VUE组件中的data () {return {}}数据组件，

}

//render 函数的作用，渲染当前组件对应的虚拟DOM结构

render(){

//这里必须返回一个JSX 虚拟DOM结构

//return null;

this.props.name = '李斯'

return <div>test DIV 组件　

{this.props.name} --{this.props.time}

<hr/>

{this.state.msg}

{/* class 创建的组件中，直接使用this.props.name 调用就行。 */}

</div>

}

const dianying = {

name : '我不是妖神',

time : 120

}

ReactDOM.render(<div>

{/*将组件的名称，直接以标签的形式丢到页面上即可*/}

{/* <Movie name={dianying.name} time={dianying.time}></Movie>*/}

</div>,document.getElementById('app'));

13.案例，实现一个评论组件

13.1 创建组件的一个模板

import React from ‘react’

import ReactDOM from ‘react-dom’

class Cmt extends React.Component {

constructor (){

super();

this.state = { }

}

render (){

return <div></div>

}

React.render(<div></div>.document.getElementById(‘app’))

13.2 具体内容

//学习 React 中创建组件

import React from 'react'

import ReactDOM from 'react-dom'

//定义父组件

class CmtList extends React.Component{

constructor(){

super();

this.state = {

CommentList : [

{id : 0, user : '段振春',content :'我爱python'},

{id : 1, user : '蔡州',content :'我爱java'},

{id : 2, user : '丁林',content :'我C++'},

{id : 3, user : '刘毅',content :'我爱PHP'},

{id : 4, user : '沁雄',content :'我爱JS'},

]

};

}

render (){

return <div>

<h1>这个是评论列表组件</h1>

{/*循环展示数据*/}

{this.state.CommentList.map(item => <div key={item.id}>

<p>评论内容：{item.content}</p>

</div>)}

</div>

}

ReactDOM.render(<div>

</div>,document.getElementById('app'));

改进版：将每一个评论内容变成无状态组件

//第一步导包

import React from 'react'

import ReactDOM from 'react-dom'

//使用function 创建无状态组件

function CmtItem(props){

return <div key={props.id}>

<h1>评论人：{props.user}</h1>

<p>评论内容：{props.content}</p>

</div>

}

//使用class 创建有状态组件

class CmtList extends React.Component{

constructor(){

super();

this.state = {

CommentsList : [

{id : 0,user :'大周',content :'我是出勤员'},

{id : 1,user :'康康',content :'我是硬件码农'},

{id : 2,user :'佩佩',content :'我是佩奇'},

{id : 3,user :'翠翠',content :'我是小翠翠'},

]

}

render(){

return <div>

<h1>这个是一个评论列表组件</h1>

{/* {this.state.CommentsList.map(item => <div key={item.id}>

<p>评论内容:{item.content}</p>

</div>)} */}

{this.state.CommentsList.map(item => <CmtItem {...item}></CmtItem>)}

</div>

}

//最后一个，进行DOM的渲染

ReactDOM.render(<div>

</div>,document.getElementById('app'));

14.继续简化，进行抽离。

抽离需要注意两点：

第一点：引入React，以及相关依赖的子组件

第二点：暴露出去。

CmtItem.jsx

//第一步，引入

import React from 'react'

//第二步，暴露出去

//使用function 创建无状态组件

export default function CmtItem (props){

return <div>

<h1>评论人：{props.user}</h1>

<p>评论内容：{props.content}</p>

</div>

}

CmtList.jsx

//第一步，引包

import React from 'react'

//导入子组件

import CmtItem from './CmtItem'

//第二步，暴露

export default class CmtList extends React.Component{

constructor(){

super();

this.state = {

CommentsList : [

{id : 0,user :'大周',content :'我是出勤员'},

{id : 1,user :'康康',content :'我是硬件码农'},

{id : 2,user :'佩佩',content :'我是佩奇'},

{id : 3,user :'翠翠',content :'我是小翠翠'},

]

}

render(){

return <div>

<h1>这个是一个评论列表组件</h1>

{/* {this.state.CommentsList.map(item => <div key={item.id}>

<p>评论内容:{item.content}</p>

</div>)} */}

{this.state.CommentsList.map(item => <CmtItem {...item}></CmtItem> )}

</div>

}

15. 配置webpack设置根目录..@ 符号配置。配置到src 目录。

16.

17.

18.

React 学习第二天 2018-07-21

猜你喜欢