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 = // // 这个是h1
//3.把虚拟DOM 渲染到页面上。
//第一个参数，渲染谁，
//第二个参数，渲染的容器，
let a = 10 ///等价于 const a = 10
let str = '您好，刘送杰同学';
const h1 = <h1>这个是一h1h1>
const arr = [
<h1>第一个h1>,
<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/>
<p className="myname">!11!!!!p>
<label for="000">1111label>
div>,document.getElementById('app'))
//上面这个方式比较复杂，不人性化
//const h11=
3.React 中创建组件的方式
3.1 第一种
第一步，创建
function Hello (){
//如果在一个组件中return 一个null， 表示空组建，什么都不渲染，
//return null;
//这种以对象或者函数的方式创建的组件，必须返回一些内容，实在不行，也要返回
//一个空内容
//使用的时候，/*将组件的名称，直接以标签的形式丢到页面上即可*/
return <h1>返回一个h1h1>;
}
第二步，传递数据，
定义好数据，const dog =｛｝
先在
然后在 组件内部取，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>
{/*将组件的名称，直接以标签的形式丢到页面上即可*/}
<Hello testage={dog.age} testcolor={dog.color}>Hello>
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
}
}
//使用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 {...dianying}>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 {...dianying}>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
}
}
React.render(
.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}>
<h1>评论人 ：{item.user}h1>
<p>评论内容 ：{item.content}p>
div>)}
div>
}
}
ReactDOM.render(<div>
<CmtList>CmtList>
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 => 评论内容:{item.content}评论人：{item.user}
{this.state.CommentsList.map(item => <CmtItem {...item}>CmtItem>)}
div>
}
}
//最后一个，进行DOM的渲染
ReactDOM.render(<div>
<CmtList>CmtList>
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 => 评论内容:{item.content}评论人：{item.user}
{this.state.CommentsList.map(item => <CmtItem {...item}>CmtItem> )}
div>
}
}
15. 配置webpack设置根目录..@ 符号配置。配置到src 目录。
16.
17.
18.