首先要讲的就是 react 强调的思想是面向数据编程 ，React 的核心思想是组件化的思想
跟着视频从头又把react学习了一遍，巩固了一下基础下面就来说一下在学习过程中认为比较重要的点吧
组件被我简单的理解成 就是类 。自定义的一个组件必须要继承react的组件 即React.Component 才能变成react的一个组件，这是规定没有原因
我要评论
class TodoList extends React.Component{}
export default TodoList;
组件定义完成之后要导出出去，便于其他组件导入引用，export 和 import 是配对使用
详解组件：
a：就是可复用的代码模块，其实也就是可复用的代码片段。
b：组件允许我们将应用的UI拆分成独立的、可复用的模块，其实也就是可复用的代码片段。React应用程序就是由组件来构建的，也就是说React应用的基石！
c：只要是页面上的一部分我们都可以把它理解成一个组件
d：组件就是网页上的有部分
e：在react中以大写字母开头的都是组件
f：ReactDOM就是为了便于我们把组件挂载(渲染)到dom元素上
是当前组件数据存放的位置, 也是当前组件的一个状态对象
State是一个组件的UI数据模型，是组件渲染时的数据依据。
在es6 语法中，创建一个组件的时候一定要写一个构造函数
constructor(props){
super(props);
this.state = {
}
}
构造函数 组件被创建的一瞬间 构造函数会自动执行，上面是固定写法记住即可 props 是当前组件的一个属性，子组件可以通过props来访问父组见的属性 this.props.属性 即可
handleItemClick(){
}
render(){
const lists = this.state.lists;
const inputVal = this.state.inputVal;
return <div className={'todoList'}>
<div>
<input value={inputVal} className={'form-control'} placeholder={'请输入要添加的学习项目'} onChange={this.handleBlur.bind(this)}/>
<button className={'btn btn-sm btn-primary listBtn'} onClick={this.handleClick.bind(this)}>add</button>
</div>
<ul>
{
lists.map((item, idx) => {
return <li onClick={this.handleItemClick.bind(this, idx)} key={idx}>{item}</li>
})
}
</ul>
</div>
}
render负责的就是当前组件要显示的内容，当我们需要触发某些事件的时候就需要用到js中的一些事件了，最常见的就是点击事件，首先要注意的一点就是 onClick 要大写
每个组件中的this 都是指向当前组件 ，react要调用方法就要使用 this.Fun()
若此方法中药调用组件中的对象则需要更改当前函数的this指向
bind(this)更改this指向 将this指向当前组件 因为state是当前组件的对象 否则addTodoList方法中的this则指向当前点击的标签
父组见通过属性的方式向子组件传递参数；
子组件通过props 接收父组件传递过来的参数，子组件读取父组件的属性 this.props.content
父组件：
return <div className={'todoList'}>
<ul>
{
lists.map((item, idx) => {
return <TodoListItem key={idx} content={item}></TodoListItem>
})
}
</ul>
</div>
子组件：
render(){
return <div>{this.props.content}</div>
}
当子组件想要操作父组见的state的时候是不能直接操作的，但是父组件可以将方法传递给子组件，子组件通过调用父组件的方法来传递参数
父
handleDelete(idx){
const lists = [...this.state.lists]; // copy state 里面的 lists
lists.splice(idx, 1);
this.setState({lists});
}
render(){
const lists = this.state.lists;
const inputVal = this.state.inputVal;
<ul>
{
lists.map((item, idx) => {
return <TodoListItem delete={this.handleDelete.bind(this)} key={idx} content={item} idx = {idx}/>
})
}
</ul>
}
子
handleClick(idx){
this.props.delete(this.props.idx);
}
render(){
return <div onClick={this.handleClick.bind(this)}>{this.props.content}</div>
}
文章的最后小编提醒大家在写代码的时候有个可优化的地方 ，就是绑定函数的地方，可以在一开始构造函数中就指定绑定函数，这样就不用每次渲染的时候都要在绑定一遍了 。
可以有效的提高代码的执行性能，这牵扯到react 比较底层的问题了，以后小编了解透彻了再来跟大家一起学习吧
constructor(props){
super(props);
this.state = {
lists: [],
inputVal: ''
}
this.handleDelete = this.handleDelete.bisn(this);
}
render(){
return
<ul>{
lists.map((item, idx) => {
return <TodoListItem delete={this.handleDelete} key={idx} content={item} idx = {idx}/>
})
}
</ul>
}
以上的写法就完美了 . ^ ^ .
本文地址：https://blog.csdn.net/zlzbt/article/details/107382271
如对本文有疑问， 点击进行留言回复！！
网友评论