react基础知识2

1. 事件处理

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

在react的事件处理程序中，内部的this是指向undefined

// 解决方案1：通过this.clickFn.bind(this)

// 解决方案2：属性初始化器语法, 提供了一个箭头函数

// 解决方案3：在函数外面包一层箭头函数 onClick={this.clickFn}

// onClick={()=>{this.clickFn()}}

class Event extends React.Component {constructor(props) {super(props)// 提供组件自己的状态this.state = {msg: 'hello react'}// 可以在构造函数中，去处理事件处理函数的this问题// this.clickFn = this.clickFn.bind(this)}render() {return (<div><p>{this.state.msg}</p>{/* 需求：点击button的时候，需要改变msg的数据 */}<buttononClick={() => {this.clickFn()}}>点我修改msg</button><a href="" onClick={this.clickFn} /></div>)}clickFn() {// 修改msg的数据// 注意点： 在react注册事件的时候，提供的事件处理函数的内部this指向undefined// 没办法访问到this，没有办法访问到当前实例，没有办法访问到数据// 如果想要修改react的状态，不能直接通过this.state.xxx去修改this.setState({msg: '呵呵'})}
}ReactDOM.render(<Event />, document.getElementById('app'))

传参的问题：

// 传参第一种：通过bind的方式进行传参，还想要获取事件对象, 事件对象是最后一个参数

// 参数第二种：通过给事件处理程序包裹一个箭头函数

// 在注册事件的时候，能够传递参数
class Event extends React.Component {constructor(props) {super(props)}render() {return (<div><ul><li>{/* 能够把id传递过来 */}<buttononClick={() => {this.clickFn(1)}}>删除1</button></li><li><buttononClick={() => {this.clickFn(2)}}>删除2</button></li><li><button>删除3</button></li></ul></div>)}// 传参第一种： 通过bind的方式进行传参，还想要获取事件对象, 事件对象是最后一个参数// 参数第二种： 通过给事件处理程序包裹一个箭头函数clickFn(id) {console.log(id)}
}
ReactDOM.render(<Event />, document.getElementById('app'))

2. 条件渲染

function Greeting(props) {const isLoggedIn = props.isLoggedIn;if (isLoggedIn) {return <UserGreeting />;}return <GuestGreeting />;
}ReactDOM.render(// Try changing to isLoggedIn={true}:<Greeting isLoggedIn={false} />,document.getElementById('root')
);

条件渲染——元素变量

class Score extends React.Component {constructor(props) {super(props)this.state = {score: 90}}render() {// 可以使用变量来保存react的对象let content = nullif (this.state.score >= 90) {// 元素变量， 把一个react对象赋值给一个变量content = <p>A</p>} else if (this.state.score >= 80) {content = <p>B</p>} else if (this.state.score >= 70) {content = <p>C</p>} else if (this.state.score >= 60) {content = <p>D</p>} else {content = <p>E</p>}return (<div><h3>提示消息</h3><p>你本次的成绩是</p>{content}</div>)}
}ReactDOM.render(<Score />, document.getElementById('app'))

条件渲染——与运算符，三目运算符

class App extends React.Component {constructor(props) {super(props)this.state = {score: 90,age: 18}}render() {return (<div><h3>提示消息</h3>{/* 可以在{}中直接书写任意的js表达式 */}{/* {this.state.age >= 18 && <div>成年人</div>}{this.state.age < 18 && <div>未成年人</div>} */}{this.state.age >= 18 ? <div>成年人</div> : <div>未成年人</div>}</div>)}
}
ReactDOM.render(<App />, document.getElementById('app'))

阻止组件渲染：

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

3. 列表渲染(key值)

class List extends React.Component {constructor(props) {super(props)this.state = {list: [{ id: 1, name: 'zs', age: 18, gender: '男' },{ id: 2, name: 'ls', age: 19, gender: '男' },{ id: 3, name: 'ww', age: 20, gender: '女' }]}}render() {let content = this.state.list.map(item => (<tr key={item.id}><td>{item.id}</td><td>{item.name}</td><td>{item.age}</td><td>{item.gender}</td></tr>))return (<table><tbody>{/* 可以直接在{}中遍历 */}{content}</tbody></table>)}
}
ReactDOM.render(<List />, document.getElementById('app'))// react中无论是条件渲染或者是列表渲染，都在js

react中设置样式，有两种方式:

// 1. 给元素添加一个className, 设置一个类样式

// 2. 给元素添加一个style属性，通过style属性设置行内样式

// 在使用style给元素设置样式的时候，style={对象}

//react中设置样式，有两种方式
// 1. 给元素添加一个className, 设置一个类样式
// 2. 给元素添加一个style属性，通过style属性设置行内样式
// 在使用style给元素设置样式的时候，style={对象}class Comment extends React.Component {constructor(props) {super(props)// 添加状态this.state = {list: [{ id: 1, name: '张三', content: '沙发' },{ id: 2, name: '李四', content: '板凳' },{ id: 3, name: '王五', content: '卖瓜子' },{ id: 4, name: '赵六', content: '今天吃了没' }],bgColor: 'pink'}}render() {return (<div style={{ backgroundColor: this.state.bgColor }}><h1>评论案例</h1><ul style={{ listStyle: 'none' }}>{this.state.list.map(item => (<Item key={item.id} data={item} />))}</ul></div>)}
}// 评论项组件,没有状态，数据是父组件传递过来的
function Item(props) {let liStyle = { height: 100 }return (<li style={liStyle}><h3>评论人：{props.data.name}</h3><p>评论内容 {props.data.content}</p></li>)
}
ReactDOM.render(<Comment />, document.getElementById('app'))

4. 受控组件和非受控组件

react操作表单的元素，操作表单的目的：获取到用户输入的内容

// react操作表单：受控组件非受控组件

受控组件：

// 受控组件： 在当前组件中的表单元素受到了react的控制，
//1. 当表单元素的内容发生改变，react对应的状态也要发生改变
//2. 当react对应的状态发生改变，表单元素的内容也要发生改变。
class Form extends React.Component {constructor(props) {super(props)this.state = {username: 'hello react'}}render() {// 一旦给input设置了value属性，value属性对应了组件中的一个状态，受控组件// 表单元素的值受到了react的控制，我们发现，表单没办法输入，没办法改变了// 除了指定一个vlaue属性，还需要指定onChange事件，用来处理内容的变化return (<inputtype="text"value={this.state.username}onChange={this.handleChange}/>)}handleChange = e => {// 我们需要改变 state.username的值this.setState({username: e.target.value})}
}ReactDOM.render(<Form />, document.getElementById('app'))

class Form extends React.Component {constructor(props) {super(props)this.state = {username: 'hello react',content: '我是内容',city: 4}}render() {return (<div><h3>input</h3><inputtype="text"value={this.state.username}onChange={this.handleChange}name="username"/><h3>textarea</h3><textareacols="30"rows="10"value={this.state.content}onChange={this.handleChange}name="content"/><h3>select</h3><selectvalue={this.state.city}onChange={this.handleChange}name="city"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">深圳</option></select></div>)}handleChange = e => {let name = e.target.name// 我们需要改变 state.username的值// es6的属性名表达式this.state[name] = e.target.valuethis.setState(this.state)}
}ReactDOM.render(<Form />, document.getElementById('app'))

非受控组件：

// 1. 在构造函数中，需要自己创建一个引用  refclass Form extends React.Component {constructor(props) {super(props)// 1. 创建refthis.usernameRef = React.createRef()this.buttonRef = React.createRef()}render() {return (<div>{/* 2. 我们创建的ref可以 在组件的任意地方使用 */}<input ref={this.usernameRef} type="text" /><button ref={this.buttonRef} onClick={this.get}>获取value值</button></div>)}get = () => {// 获取input框的value值// 受控组件： 我们把input框的value值交给react来处理// 非受控组件： 我们需要手动的操作DOM，手动获取到DOM的value值// refs: 用于操作DOM的// 3. 通过this.usernameRef.currentconsole.log(this.usernameRef.current.value)}
}ReactDOM.render(<Form />, document.getElementById('app'))

5. 组件通讯

父到子：

class Father extends React.Component {constructor(props) {super(props)// 组件的状态是私有的，别的组件是用不了this.state = {msg: '哈哈'}}render() {return (<div>我是父组件<Son msg={this.state.msg} name="zs" age="18" /></div>)}
}// 需求： 在子组件中如何使用父组件的数据
// 1. 父组件通过自定义的属性把值传递给子组件
// 2. 子组件通过props属性可以获取到所有父组件传递过来的数据
class Son extends React.Component {// props就有所有父组件传递过来的数据constructor(props) {super(props)}render() {console.log(this.props)return (<div>我是子组件-----{this.props.name} ----{this.props.msg}</div>)}
}ReactDOM.render(<Father />, document.getElementById('app'))

子到父：

class Father extends React.Component {render() {return (<div style={{ width: 400, height: 400, backgroundColor: 'pink' }}>这是父组件{/* 2. 父组件把方法传递给子组件 */}<Son getData={this.getData} /></div>)}//1： 父组件提供一个方法getData(msg) {console.log(msg)console.log('我执行吗')}
}class Son extends React.Component {constructor(props) {// 子组件通过props来接收父组件传递过来的方法super(props)this.state = {msg: '哈哈'}}render() {return (<div style={{ width: 200, height: 100, backgroundColor: 'green' }}><p>{this.state.msg}</p><button onClick={this.sendData}>给父组件传递数据</button></div>)}sendData = () => {// 4. 给父组件传递数据let { getData } = this.propsgetData(this.state.msg)}
}ReactDOM.render(<Father />, document.getElementById('app'))

状态提升：

// 对于多个组件需要共享的数据，应该把这个数据存放到他们公共的父组件中。状态提升

// 始终保持数据是单向数据流。

6. react中的children属性

class Modal extends React.Component {render() {let { title, children } = this.props// 通过props.children就能够获取到组件的子元素return (<div><h3>{title}</h3><div>{children}</div></div>)}
}
// vue 中 slot插槽
ReactDOM.render(<div><Modal title="提示">你是否要退出本系统？</Modal><Modal title="温馨提示">是确定要删除这条记录吗？</Modal><Modal title="警告">这是一个提示的消息</Modal></div>,document.getElementById('app')
)

7. react中发送请求

发送axios请求：

class App extends React.Component {render() {return (<div><button onClick={this.clickFn}>获取所有的书籍</button><button onClick={this.add}>添加书籍</button></div>)}clickFn = async () => {// 发送axios请求let res = await axios.get('http://localhost:9999/getBookList')console.log(res.data)}add = async () => {console.log('11')// 发送请求，添加书籍let res = await axios.post('http://localhost:9999/addBook', {name: '你不知道的js',desc: 'js程序员应该好好读一下'})console.log(res)}
}ReactDOM.render(<App />, document.getElementById('app'))

发送fetch请求:

class App extends React.Component {render() {return (<div><button onClick={this.getAll}>获取所有的书籍</button><button onClick={this.add}>添加书籍</button><button onClick={this.getInfo}>获取书籍详情</button></div>)}getAll = () => {// 发送一个get请求，获取所有的书籍// fetch是window的一个方法，fetch是一个全局方法，可以直接使用// fetch: 返回的是promise对象fetch('http://localhost:9999/getBookList').then(res => {// res是一个promise对象，表示请求的结果// res获取到仅仅是响应的结果，还不是我们想要的json// 还需要对res.json()才表示把响应结果转成json,返回的仍是promisereturn res.json()}).then(data => {console.log(data)})}getInfo = async () => {let res = await fetch('http://localhost:9999/getBookInfo?id=1')let data = await res.json()console.log(data)}add = async () => {// fetch发送post请求// 参数1： 请求的url地址// 参数2： 配置对象let res = await fetch('http://localhost:9999/addBook', {method: 'POST',headers: {// 用于指定请求的数据类型// 'content-type': 'application/x-www-form-urlencoded''content-type': 'application/json'},body: JSON.stringify({name: '测试',desc: '测试一下内容'})})let data = await res.json()console.log(data)}
}ReactDOM.render(<App />, document.getElementById('app'))